From 50aff77beeb7888ed4a3a5817677be04d8c38b7e Mon Sep 17 00:00:00 2001 From: cyan33 Date: Tue, 27 Feb 2018 15:50:10 -0500 Subject: [PATCH] updating --- blog/assets/update-process.jpg | Bin 0 -> 29285 bytes blog/update.md | 139 +++++++++++++++++++++++++++++++++ dilithium/src/Component.js | 5 -- dilithium/src/DOMComponent.js | 4 - dilithium/src/Reconciler.js | 2 +- 5 files changed, 140 insertions(+), 10 deletions(-) create mode 100644 blog/assets/update-process.jpg create mode 100644 blog/update.md diff --git a/blog/assets/update-process.jpg b/blog/assets/update-process.jpg new file mode 100644 index 0000000000000000000000000000000000000000..91dc02adec3bafbe9328cce586c6e64fb1c06057 GIT binary patch literal 29285 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 BM*9E& literal 0 HcmV?d00001 diff --git a/blog/update.md b/blog/update.md new file mode 100644 index 0000000..672025f --- /dev/null +++ b/blog/update.md @@ -0,0 +1,139 @@ +# `setState` and Update + +React 中组件的更新大致有两种,第一种是由于单向数据流传到当前组件中 `props` 的变化导致,另一种是由于组件中 `setState` 引起的 local state 的变化导致。由于 `props` 的单项数据流始于最外层的组件中的 local state(如果不使用 Redux 等状态管理工具的话),我们不妨从 `setState` 入手,分析 React 是如何更新 DOM 的。 + +在继续下去之前,推荐阅读: + +[Reconciliation](https://reactjs.org/docs/reconciliation.html) + +在 React 中,`setState` 是异步的,这是因为 React 对 `setState` 进行了 batch 操作,即将短时间内的几个 `setState` 合并为一个。为什么要这么做呢?因为计算由 `setState` 而引发的 DOM diff 是很费时的,batch 使整个流程从**读取、修改、读取、修改、读取、修改……**变成了**读取、读取、读取、修改**,减少了大量的计算操作。 + +为了简化,我们暂不考虑 batch 的实现。并且不考虑 `setState` 接受一个回调函数作为参数的情况。 + +首先回忆一下,`setState` 只能在 Class Component 中使用,这意味着这个方法位于 `Component` 这个文件中: + +```js +class Component { + // ... + setState(partialState) { + this._pendingState = Object.assign({}, this.props, partialState) + this.updateComponent(this._currentElement, this._currentElement) + } + + updateComponent(prevElement, nextElement) {} +} +``` + +为什么这里要调用 `updateComponent` 的两个参数都是 `currentElement` 呢?我们知道 React 用一个 element 来表示一个组件的 DOM 结构。并且在上文提到,组件的更新无非有两种,一种是组件的 `props` 发生变化,这会改变 Element 的数据,而 state 的改变却并不会改变 Element。所以这里 element 在 `setState` 的操作中是没有变化的。 + +知道了这一点后,我们也知道要在 `updateComponent` 中区分这两种情况了。 + +```js +updateComponent(prevElement, nextElement) { + if (prevElement !== nextElement) { + // should get re-render because of the changes of props passed down from parents + // react calls componentWillReceiveProps here + } + + // re-bookmarking + this._currentElement = nextElement + + this.props = nextElement.props + this.state = this._pendingState + this._pendingState = null + + const prevRenderedElement = this._renderedComponent._currentElement + const nextRenderedElement = this.render() + + if (shouldUpdateComponent(prevRenderedComponent, nextRenderedComponent)) { + Reconciler.receiveComponent(this._renderedComponent, nextElement) + } else { + // remount everything under this node + Reconciler.unmountComponent(this._renderedComponent) + + const nextRenderedComponent = instantiateComponent(nextRenderedComponent) + this._renderedNode = Reconciler.mountComponent(nextRenderedComponent) + + DOM.replaceNode(this._renderedComponent._domNode, this._renderedNode) + } +} +``` + +在这段代码中,如上所述,我们首先通过判断 `prevElement` 和 `nextElement` 是否相等,来得出是 `props` 变化还是 `state` 变化导致的 re-render。如果 `Element` 发生变化,说明 `props` 发生了改变,React 此时也会调用 `componentWillReceiveProps` 这个生命周期函数。 + +接着,我们重新设置当前 component instance 的 `props` 和 `state`。由于 React 组件就是 `(props, state) => element` 的一个函数映射,所以此时我们通过 `render` 得出了新的 element。 + +接下来我们需要正式进入通过对边 `prevElement` 和 `nextElement` 尽兴更新的环节。在 [Reconciliation](https://reactjs.org/docs/reconciliation.html) 中,我们了解到,现有的 [Tree Diff Algorithm](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) 的复杂度是 O(n^3),而 React 基于两个假设得出了一个 O(n) 的 Diff 算法,也就是我们所说的 Virtual DOM Diff Algorithm。 + +这两个假设是: + +1. 不同类型的 Element 会生成不同的子树。例如 `div` 变化成 `ul`,或者复合组建由 `` 变为 `
` +1. 通过 `key` 这个属性,React 可以得知在重绘中需要具体更新哪几个节点。 + +我们暂且不考虑 `key` 的实现,只考虑第一点。这样一来也很简单地实现了 `shouldUpdateComponent` 这个函数。(**注意区分 shouldUpdateComponent 和 shouldComponentUpdate 两个方法,前者用来判断组件 element 的 type 有没有变化,后者是 React 组件内部的生命周期函数**) + +```js +function shouldUpdateComponent(prevElement, nextElement) { + return prevElement.type === nextElement.type +} +``` + +当 `element` 类型发生改变时,React 选择重新绘制由此向下的所有节点。所以我们看到了 `else` 部分的代码:首先销毁当前 component instance,然后重新 instantiate,并 mount component。 + +当 `element` 类型没有改变时,我们需要**更新**相应的 DOM 节点,而不是重新 mount。我们记得之前在 mounting 中讲到,React 通过 Reconciler 实现了 `mountComponent` 接口的多态。这里我们再介绍一个新的方法,叫做 `receiveComponent`(但是这个命名并不是很好)。它的实现如下: + +```js +function receiveComponent(component, nextElement) { + if (component._currentElement === nextElement) return + component.updateComponent(component._currentElement, nextElement) +} +``` + +实际上就是调用了对应组件内部的 `updateComponent` 这个方法。 + +需要额外注意的是,从最开始的 mounting,亦或是从 `setState` 开始的 updating,class component 内部的 `this._renderedComponent` 和 `this._currentElement` 是 **`render` 函数最外层的组件类型**,调用的 `updateComponent` 从 Class Component defer到了 DOM Component)。 + +举个例子: + +```js +class Counter extends React.Component { + constructor() { + super() + this.state = { count: 0 } + setInterval(() => { + this.setState({ count: this.state.count + 1 }) + }, 1000) + } + + render() { + return ( +
+ { this.state.count } +
+ ) + } +} +``` + +那么整个更新的流程图应该是这样的: + +![update-process](assets/update-process.jpg) + +由此可以看出,和 mounting 一样,真正的 updating 也是发生在 `DOMComponent` 里。 + +那么我们进一步去看 `DOMComponent` 内部是怎么进行 update 的。 + +```js +// DOMComponent.js +updateComponent(prevElement, nextElement) { + this._currentElement = nextElement + this._updateNodeProperties(prevElement.props, nextElement.props) + this._updateDOMChildren(prevElement.props, nextElement.props) +} +``` + +非常简洁是不是?更新当前 DOM 节点的属性(上节已经讲过),然后递归更新子树。 + +但是到目前位置我们还并没有详细进入 `_updateDOMChildren` 这个函数的细节,而这正是 React Virtual DOM 的 Diff 算法的精华。 + +这一节我们着重分析 **React update 的整个流程**,下一节我们会分析这个函数带来的一系列操作,并开始分析 Diff 算法的内部细节。 diff --git a/dilithium/src/Component.js b/dilithium/src/Component.js index a9a1b5b..751b2b9 100644 --- a/dilithium/src/Component.js +++ b/dilithium/src/Component.js @@ -72,11 +72,6 @@ class Component { } } - receiveComponent(nextElement) { - // the new element that the current component should update itself to - this.updateComponent(this._currentElement, nextElement) - } - performUpdateIfNecessary() { // react uses a batch here, we are just gonna call it directly without delay this.updateComponent(this._currentElement, this._currentElement) diff --git a/dilithium/src/DOMComponent.js b/dilithium/src/DOMComponent.js index 1b5ce2d..5d684a1 100644 --- a/dilithium/src/DOMComponent.js +++ b/dilithium/src/DOMComponent.js @@ -24,10 +24,6 @@ class DOMComponent extends MultiChild { this.unmountChildren() } - receiveComponent(nextElement) { - this.updateComponent(this._currentElement, nextElement) - } - updateComponent(prevElement, nextElement) { this._currentElement = nextElement this._updateNodeProperties(prevElement.props, nextElement.props) diff --git a/dilithium/src/Reconciler.js b/dilithium/src/Reconciler.js index dc24c11..9a25b9d 100644 --- a/dilithium/src/Reconciler.js +++ b/dilithium/src/Reconciler.js @@ -14,7 +14,7 @@ function receiveComponent(component, nextElement) { const prevElement = component._currentElement if (prevElement === nextElement) return - component.receiveComponent(nextElement) + component.updateComponent(component._currentElement, nextElement) } module.exports = {