React拾遗（下）

reconciliation（协调算法）

react用于更新DOM的算法。基于两点假设，实现了一个启发的O(n)算法：

两个不同类型的元素将产生不同的树。
通过渲染器附带key属性，开发者可以示意哪些子元素可能是稳定的。

元素的不同类型

当对比两棵树时，React首先比较两个根节点。每当根元素有不同类型，React将卸载旧树并重新构建新树。

当树被卸载，旧的DOM节点将被销毁。组件实例将会接收到componentWillUnmount()方法。当构建一棵新树，新的DOM节点被插入到DOM中。组件实例将接收到componentWillMount()以及之后的componentDidMount()。任何有关旧树的状态都将被丢弃。

例如，在进行对比：

<div>

  <Counter />

</div>

<span>

  <Counter />

</span>

这将会销毁旧的Counter并重装新节点。

相同类型的DOM元素

当比较两个相同类型的React DOM元素时，React则会观察二者的属性，保持相同的底层DOM节点，并仅更新变化的属性。(比如说变化的类名、样式等)

在处理完DOM元素后，React递归其子元素。

递归子节点

默认时。当递归DOM节点的子节点，React仅在同一时间点递归两个子节点列表，并在有不同时产生一个变更。

例如，当在子节点末尾增加一个元素，两棵树的转换效果很好：

<ul>

  <li>first</li>

  <li>second</li>

</ul>

<ul>

  <li>first</li>

  <li>second</li>

  <li>third</li>

</ul>

React将会匹配两棵树的

first

，并匹配两棵树的

second

节点，并插入

third

节点树。

若原生实现，在开始插入元素会使得性能更棘手。例如，两棵树的转换效果则比较糟糕：

<ul>

  <li>Duke</li>

  <li>Villanova</li>

</ul>

<ul>

  <li>Connecticut</li>

  <li>Duke</li>

  <li>Villanova</li>

</ul>

React会调整每个子节点，而非意识到可以完整保留

Duke

和

Villanova

子树。低效成了一个问题。

Keys

为解决该问题，React支持了一个key属性。当子节点有key时，React使用key来匹配原本树的子节点和新树的子节点。例如，增加一个key在之前效率不高的样例中能让树的转换变得高效：

<ul>

  <li key="2015">Duke</li>

  <li key="2016">Villanova</li>

</ul>

<ul>

  <li key="2014">Connecticut</li>

  <li key="2015">Duke</li>

  <li key="2016">Villanova</li>

</ul>

现在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 (

    <div>

      {this.props.children}

    </div>

  );

}

然而，有时候将其插入到 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 树的祖先。

巴特西

React拾遗（下）

reconciliation（协调算法）

Portals

最新文章

热门文章