React Best Practice 05

[dlrandy]

当React必须显示一个组件的时候，它调用组件的render方法并且递归调用children的render方法。最终render方法会返回一个React元素树，React使用这个树来决定必须做那个DOM操作来更新UI。

任何时候组件的状态改变，React会再次调用节点的render方法，它会把结果和上一次的元素树进行比较。react能够知道状态（DOM）更新的最小操作。这就是reconciliation。

元素树的比较： 1、两个元素有不同的类型，就渲染不同的树 2、开发者 可以使用keys标记孩子在整个不同的render调用里是稳定的

react-addons-perf帮助存储和显示性能相关的信息的

[dlrandy]

react-addons-perf Perf有一个start方法开始搜集信息；stop信息足够了，可以显示了。 显示信息的方法有printWasted打印组件执行render方法花费的时间，返回和上一次执行产生的element； printOperations一旦组件更新了显示浏览器使用的那些DOM更新操作。一般在update阶段监控。

Keys可以帮助React理解哪些元素改变了，哪些已经增加了或者移除了。React将把这个值和上一个值比较来决定元素是否是新的或者是已经存在的。有key的就是已经存在的了

使用Key帮助react决定最小的操作并改善组件的渲染性能，key多用于迭代器和list，array等

React为了找到去减小DOM 操作的必须步骤，它必须触发 所有组件的render方法，来把之前的结果和现在的进行比较。 优化技术：

1. 开发版的react适合开发和调试，production的时候，要使用prod版的react，就是使用webpack.DefinePlugin ({ 'process.env': { NODE_ENV: JSON.stringify('production') } }),这个移除了warn等提示信息。 2.webpack.optimize.UglifyJsPlugin() 3.不要预先优化，一定要等到遇到性能瓶颈的时候在优化。提前优化会导致优化的复杂性 4.为了避免不必要的比较我们使用shouldComponentUpdate，同时提供了React.PureComponent, 它实现了所有props和state的shallow比较，这个和immutable结果配合良好。执行复杂对象的深度比较有时候比render方法本身代价更高，所以PureComponent最好用在性能已经被衡量过而且已经知道了哪些组件需要更多的 时间执行。 5.stateless functional component，可以使用组件简单可复用，但是并不会对性能有任何的优化。

[dlrandy]

为了解决重新渲染的问题，理解哪个组件可以优化，需要把大的组件重构成更小的一些组件。

PureComopnent可以用在 简单的props或者state的时候，或者知道深度的数据已经变化forceUpdate的时候，或者使用immutable的时候

为了找到哪个组件不需要rerender, 能够使用PureComponent，可以使用why-did-you-update

在render的return方法里创建函数/常量属性会损害性能

受控的组件（state管理的组件），可能会导致很多不必要的重复渲染。

[dlrandy]

监控和改善性能的工具和库 改善性能最强大的工具是使用shouldComponentUpdate,使用PureComponent。shallow 比较并不会受到属性值得影响，一个解决的办法就是使用immutability。

检测工具可以是react-addons-perf, react-perf-tool, 或者是chrome浏览器的扩展chrome-react-perf

babel 插件可以在编译的时候优化代码，第一个是babel-plugin-transform-react-constant-elements, 这个是把基于不变props渲染的部分抽出一个组件，避免调用不必要的createElement。第二个是babel-plugin-transform-react-inline-elements替换掉jsx用更优化的版本。可以参考这个https://github.com/thejameskyle/babel-react-optimize。

[dlrandy]

shallow rendering （多用于简单独立的Pure 组件） 和full DOM rendering（多个组件放在一起的情况） 上面的也就是测试React的两种方式： 1、Shallow rendering 2、mount the component into a detached DOM

测试可以使得代码更健壮，易于重构，防止新的代码影响到旧代码的功能

TDD 是先写测试，后写能够通过测试的代码

react-addons-test-utils可以 shallow render: TestUtils.createRenderer().getRenderOutput()

或者full DOM render（并且提供了一些方法来引用DOM节点）: TestUtils.renderIntoDocument TestUtils.findRenderedDOMComponentWithTag(tree, 'button')

使用 TESTUTILS shallow rendering 不能够模拟事件。Enzyme的可以。

TODOMVC非常适合选择开发和测试框架的标准方式

高阶组件的测试 Page Object 模式多用于测试的时候有很多的重复的测试任务。

当App 出现问题时： 1、通知用户 帮助用户理解出现了什么问题 应该做什么 2、收集错误信息以及app 状态 浮现问题 快速修复bug

在React里，如果 一个组件抛出异常，它会停止渲染整个树，主要是提高安全性和避免不一致的状态

要想出错的组件不影响其他的组件渲染，可以使用react-component-errors, 给所有组件的render方法封装进try。。catch里，不会导致整个树失败。