那些React-Native踩过的的坑

用户1148881

发布于 2018-01-15 10:09:43

1.9K0

发布于 2018-01-15 10:09:43

这几天开始边学边做新模式，也踩了不少坑，所以会记录下来--俗话说好记心不如烂笔头，何况还没有一颗好记心（-_-）。

从学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`.

分析：