reconciliation（协调算法）
react用于更新DOM的算法。基于两点假设，实现了一个启发的O(n)算法：
- 两个不同类型的元素将产生不同的树。
- 通过渲染器附带
key属性，开发者可以示意哪些子元素可能是稳定的。
元素的不同类型
当对比两棵树时，React首先比较两个根节点。每当根元素有不同类型，React将卸载旧树并重新构建新树。
当树被卸载，旧的DOM节点将被销毁。组件实例将会接收到componentWillUnmount()方法。当构建一棵新树，新的DOM节点被插入到DOM中。组件实例将接收到componentWillMount()以及之后的componentDidMount()。任何有关旧树的状态都将被丢弃。
例如，在进行对比：
这将会销毁旧的Counter并重装新节点。
相同类型的DOM元素
当比较两个相同类型的React DOM元素时，React则会观察二者的属性，保持相同的底层DOM节点，并仅更新变化的属性。(比如说变化的类名、样式等)
在处理完DOM元素后，React递归其子元素。
递归子节点
默认时。当递归DOM节点的子节点，React仅在同一时间点递归两个子节点列表，并在有不同时产生一个变更。
例如，当在子节点末尾增加一个元素，两棵树的转换效果很好：
- first
- second
- first
- second
- third
React将会匹配两棵树的
first，并匹配两棵树的second 节点，并插入third节点树。若原生实现，在开始插入元素会使得性能更棘手。例如，两棵树的转换效果则比较糟糕：
- Duke
- Villanova
- Connecticut
- Duke
- Villanova
React会调整每个子节点，而非意识到可以完整保留
Duke 和 Villanova子树。低效成了一个问题。Keys
为解决该问题，React支持了一个key属性。当子节点有key时，React使用key来匹配原本树的子节点和新树的子节点。例如，增加一个key在之前效率不高的样例中能让树的转换变得高效：
- Duke
- Villanova
- Connecticut
- Duke
- Villanova
现在React知道带有'2014'的key的元素是新的，并仅移动带有'2015'和'2016'的key的元素。
权衡
由于React依赖于该启发式算法，若其背后的假设没得到满足，则其性能将会受到影响：
- 算法无法尝试匹配不同组件类型的子元素。若你发现两个输出非常相似的组件类型交替出现，你可能希望使其成为相同类型。实践中，我们并非发现这是一个问题。
- Keys应该是稳定的，可预测的，且唯一的。不稳定的key（类似由
Math.random()生成的）将使得大量组件实例和DOM节点进行不必要的重建，使得性能下降并丢失子组件的状态。
Portals
Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。
ReactDOM.createPortal(child, container)
第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或碎片。第二个参数（container）则是一个 DOM 元素。
用法
通常讲，当你从组件的 render 方法返回一个元素，该元素仅能装配 DOM 节点中离其最近的父元素
render() { // React mounts a new div and renders the children into it return ( {this.props.children} );} 然而，有时候将其插入到 DOM 节点的不同位置也是有用的：
render() { // React does *not* create a new div. It renders the children into `domNode`. // `domNode` is any valid DOM node, regardless of its location in the DOM. return ReactDOM.createPortal( this.props.children, domNode, );} 对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式，但你需要子组件能够在视觉上“跳出（break out）”其容器。例如，对话框、hovercards以及提示框。
通过 Portals 进行事件冒泡
尽管 portal 可以被放置在 DOM 树的任何地方，但在其他方面其行为和普通的 React 子节点行为一致。如上下文特性依然能够如之前一样正确地工作，无论其子节点是否是 portal，由于 portal 仍存在于 React 树中，而不用考虑其在 DOM 树中的位置。
这包含事件冒泡。一个从 portal 内部会触发的事件会一直冒泡至包含 React 树 的祖先。