那些React-Native踩过的的坑

    这几天开始边学边作新模式，也踩了很多坑，因此会记录下来--俗话说好记心不如烂笔头，况且尚未一颗好记心（-_-）。

   从学React-Native开发功能模块大概5天，有些体会：1若是说按产品原型去作同样东西，那是容易的，可是这会形成不少问题，第一个是机器人同样写代码，你不会从项目总体思考，代码的质量也比较差并且不容易维护）,因此决定天天写个博客，看1个小时React-native基础点。

   0x01 关于Reac-Native调试命令react-native start的坑

   windows环境下， 开启react项目（暂且将命令服务称之为后台）后台再通过一些操做后，立刻会出现下图状态operation not permitted,lstat '..\.git\inde.lock'..错误

   

   一开始根据翻译的话说是对这个文件的操做不被容许：

   第一点：很容易想到是文件权限的问题，能够打开这个路径下的文件属性（.git文件夹是项目仓库，默认是隐藏的，文件管理设置显示隐藏的项目）发现读写属性没问题

   第二点：cmd命令没有以管理员方式运行，实测其实没效果

   第三点：查看了github的Reac-Native issues 而后发现找到两个已经关闭的issues

   

   下面列了下方法：

      1实际上是node_modules/react-native/local-cli/server/server.js 文件中找到process.on('uncaughtException'行的而后注释process.exit(0)退出进程的代码，亲测可用比较方便。

      2未安装watchman引发的，这种方法没有实测

   

    参考：http://stackoverflow.com/questions/38701115/windows-android-react-native-server-crashes-very-often/38831876#38831876

    0x02 布局页面中的某个部分频繁刷新

   我这边作一个ListView中的一些item的须要倒计时显示，一开始我把他放在整个item的render布局中而后发现加载5个定时器的时候切换页面的时候特别卡，后面尝试把页面切换的时候把定时器移除（一开始认为切换后再回来页面会从新建立），可是发现其实不会。后面听了技术老大的说封装这个定时器组件，这里涉及到react-native底层原理，由于放在整个item的布局中的话，每次更新时间实际上是用diff算法计算此次的virtual dom与上次的virtual dom不一样之处，若是不同更新不一样的地方，而若是item中的布局比较复杂的话，计算会比较耗时，可是若是封装到组件中若是更新时间只须要计算<View><Text></Text></View>很简单的virtual dom，效率上会提高不少，实测效率提高不少。

         封装再单独组件中检测执行 两个定时器消耗697ms与816ms 内存开销还没测

  

  关于这个点后续会实测具体时间来做说明。

  0x03 关于state的实用用法

  在react-native中state表明动态改变值的状态，但如何应用到开发中是一个关键点？

  应用方向：若是页面中触发一个事件会引发多个控件改变，那么咱们只要设置设定一个state的属性，不一样地方判断其值，若是改变的话对应全部带有属性的布局都会更新，至关于简单代码实现多控件刷新。

  具体例子：

   0x01网络请求的不一样状态：请求成功-无内容 请求成功-有数据 解析失败 接口错误 

   0x02播放器的详情页中点击播放按钮 进度条开始往前走 能够设置一个播放状态

          而后若点击播放

          1按钮改变按钮图标

          2播放进度条开始往前走

  0x03 关于react-native中ListView加载数据细节

    页面中常常会有上拉加载数据的状况，若使用

    

    那时候弄的页面比直接使用快2.5秒左右，尤为是页面item布局复杂的话效果更明显。

  0x04 Undefined is not a function(React.findNodehandle)

import {
  ...
  findNodeHandle,
  ...
} from 'react-native';
不使用类名调用方法:
 findNodeHandle(ref)

0x05 redux-form问题

 

问题：代码以下

_onPress(index,value) {
    this.setState({currentIndex: index});
}

render() {

        const {title, menuData}=this.props;
        return (<div className="sub-sideBar">
            <div className="title">{title}</div>
            {menuData.map((value, index) => {
                if(!value)
                    return;
                return <a key={index} onClick={this._onPress(index,value)}
                          className={this.getItemCssClasses(index)}>
                    <span>{value.title}</span>
                </a>;
            })}
        </div>);
    }

 

warning.js:36Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

分析：

  你会发现onClick={this._onPress(index,value)}虽然咱们没有点击下面的超连接，可是这里会无限打印log，因此说react会自动执行下面的onClick表达式，从而获得真正的onclick函数句柄，进而致使无限修改state与reRender，直到内存溢出。

 

解决方法：

所以能够是onClick={this._onPress.bind(2)}或者onClick={()=>{this._onPress(2)}}，
 后者当react执行onClick表达式的时候获得的是一个函数

参考：https://github.com/facebook/react/issues/7177

　　   http://blog.csdn.net/liangklfang/article/details/53694994

持续更新中。。。