react 之 performance、Reconciliation

performance：

1、使用 production 模式；

2、插件：

uglify-js-brunch ：minify js 文件

envify：确认配置了正确环境

uglifyify：minify code

UglifyJS： a JavaScript parser, minifier, compressor and beautifier toolkit.

3、开发环境性能调试：

（1）Chrome Performance

（2）DevTools Profiler

4、渲染超长列表使用：react-window

5、avoid reconcilation：使用 PureComponent、shouldComponentUpdate（which is triggered before the re-rendering process starts），但是这两种方案只是进行了浅比较，而对于复杂的数据结构的变化则会出问题。

解决办法：不要改变 state、props 的数据（就是深拷贝数据），使用 Immutable data：（1）...扩展语法、（2）Object.assign、（3）Immutable.js。immutable 结构数据可以很方便跟踪对象的变化。

Reconciliation：

what made in React’s “diffing” algorithm

动机：render() 可看做是在创建一个 react 组件树，组件更新的算法复杂度为 O(n3)，n 为组件数。基于这两种前提下：（1）不同类型的两个元素会生成不同的 tree；（2）开发者可通过为元素增加 key 属性来避免不必要的更新。（这两种假设适用于大多数场景）算法复杂可降为 O(n)。

diff 算法：

（1）元素类型不一致，整个元素都会改变

（2）元素类型一致，则只改变属性

（3）然后迭代比较子元素

加唯一 key 值来防止不需要更新元素进行不必要的更新。

tradeoffs：

 reconciliation algorithm is an implementation detail。

Portals:

渲染一个 child 到一个特定的 DOM 节点中，如下代码，child 会属于 container 的子元素，而不属于引用下面代码的组件(引用组件)。

使用：

render(){

    return ReactDOM.createPortal(child, container);

}

场景：悬浮卡片、dialogs 等。

事件冒泡：引用组件可监听 child 中时间。