有关ReactNative性能问题-小结

1.console.log语句
在运行打好了离线包的应用时，控制台打印语句可能会极大地拖累JavaScript线程。注意有些第三方调试库也可能包含控制台打印语句，比如redux-logger，所以在发布应用前请务必仔细检查，确保全部移除。
这里有个小技巧可以在发布时屏蔽掉所有的console.*
调用。React Native中有一个全局变量DEV
用于指示当前运行环境是否是开发环境。我们可以据此在正式环境中替换掉系统原先的console实现。

if (!DEV) {
global.console = {
info: () => {},
log: () => {},
warn: () => {},
debug: () => {},
error: () => {},
};
}

这样在打包发布时，所有的控制台语句就会被自动替换为空函数，而在调试时它们仍然会被正常调用。
还有个babel插件可以帮你移除所有的console.*
调用。首先需要使用npm install babel-plugin-transform-remove-console --save
来安装，然后在项目根目录下编辑（或者是新建）一个名为·.babelrc`的文件，在其中加入：

{ "env": { "production": { "plugins": ["transform-remove-console"] } }}

这样在打包发布时，所有的控制台语句就会被自动移除，而在调试时它们仍然会被正常调用。
2.开发模式 (dev=true)
JavaScript线程的性能在开发模式下是很糟糕的。这是不可避免的，因为有许多工作需要在运行的时候去做，譬如使你获得良好的警告和错误信息，又比如验证属性类型（propTypes）以及产生各种其他的警告。
3.缓慢的导航器(Navigator)切换
如之前说，Navigator
的动画是由JavaScript线程所控制的。想象一下“从右边推入”这个场景的切换：每一帧中，新的场景从右向左移动，从屏幕右边缘开始（不妨认为是320单位宽的的x轴偏移），最终移动到x轴偏移为0的屏幕位置。切换过程中的每一帧，JavaScript线程都需要发送一个新的x轴偏移量给主线程。如果JavaScript线程卡住了，它就无法处理这项事情，因而这一帧就无法更新，动画就被卡住了。
长远的解决方法，其中一部分是要允许基于JavaScript的动画从主线程分离。同样是上面的例子，我们可以在切换动画开始的时候计算出一个列表，其中包含所有的新的场景需要的x轴偏移量，然后一次发送到主线程以某种优化的方式执行。由于JavaScript线程已经从更新x轴偏移量给主线程这个职责中解脱了出来，因此JavaScript线程中的掉帧就不是什么大问题了 —— 用户将基本上不会意识到这个问题，因为用户的注意力会被流畅的切换动作所吸引。
新的React Navigation库的一大目标就是为了解决这个问题。React Navigation中的视图是原生组件，同时用到了运行在原生线程上的Animated
动画库，因而性能表现十分流畅。
4.ListView初始化渲染太慢以及列表过长时滚动性能太差
这是一个频繁出现的问题。因为iOS配备了UITableView，通过重用底层的UIViews实现了非常高性能的体验（相比之下ListView的性能没有那么好）。用React Native实现相同效果的工作仍正在进行中，但是在此之前，我们有一些可用的方法来稍加改进性能以满足我们的需求。
initialListSize
这个属性定义了在首次渲染中绘制的行数。如果我们关注于快速的显示出页面，可以设置initialListSize
为1，然后我们会发现其他行在接下来的帧中被快速绘制到屏幕上。而每帧所显示的行数由pageSize
所决定。
pageSize
在初始渲染也就是initialListSize
被使用之后，ListView将利用pageSize
来决定每一帧所渲染的行数。默认值为1 —— 但是如果你的页面很小，而且渲染的开销不大的话，你会希望这个值更大一些。稍加调整，你会发现它所起到的作用。
scrollRenderAheadDistance
“在将要进入屏幕区域之前的某个位置，开始绘制一行，距离按像素计算。”
如果我们有一个2000个元素的列表，并且立刻全部渲染出来的话，无论是内存还是计算资源都会显得很匮乏。还很可能导致非常可怕的阻塞。因此scrollRenderAheadDistance
允许我们来指定一个超过视野范围之外所需要渲染的行数。
removeClippedSubviews
“当这一选项设置为true的时候，超出屏幕的子视图（同时overflow
值为hidden
）会从它们原生的父视图中移除。这个属性可以在列表很长的时候提高滚动的性能。默认为false。（0.14版本后默认为true）”
这是一个应用在长列表上极其重要的优化。Android上，overflow
值总是hidden
的，所以你不必担心没有设置它。而在iOS上，你需要确保在行容器上设置了overflow: hidden
。
5.我的组件渲染太慢，我不需要立即显示全部
这在初次浏览ListView时很常见，适当的使用它是获得稳定性能的关键。就像之前所提到的，它可以提供一些手段在不同帧中来分开渲染页面，稍加改进就可以满足你的需求。此外要记住的是，ListView也可以横向滚动。