摘要：技术上来说，当方法被调用后或者发生改变后，方法都会被调用。下一步，会设置为。之后，检测当前更新是否由更新引起的。这是因为，使用是导致组件持久化更新，而会被方法的返回值重新赋值。
接上文，
React流程图：
https://bogdan-lyashenko.gith...
关于组件的更新，我们先看下代码里的注释：
对于已挂载组件的更新过程，React会首先调用componentWillReceiveProps和shouldComponentUpdate这两个方法。然后，在更新没有跳过的前提下，剩下的有关更新的生命周期方法会被调用，在这之后，DOM节点会被最终更新。默认情况下，DOM的更新会使用React中的虚拟DOM算法，有特殊需求的客户端可能需要覆盖相关实现。（‘Perform an update to a mounted component. The componentWillReceiveProps and shouldComponentUpdate methods are called, then (assuming the update isn’t skipped) the remaining update lifecycle methods are called and the DOM representation is updated. By default, this implements React’s rendering and reconciliation algorithm. Sophisticated clients may wish to override this.’）
看起来还是比较合理的一个过程。
以上过程中，我们做的第一件事就是检测props是否改变。技术上来说，当setState方法被调用后或者props发生改变后，updateComponent方法都会被调用。如果props真的发生了改变，那么生命周期方法componenttWilllReceiveProps就会被调用。之后，React会基于阻塞状态队列（我们之前设置的存放局部state的队列，在我们的例子里会像这个样子：[{message:"click state message"}]）里的state重新计算nextState，当然，如果只是props发生了改变，那么state相关操作不会被执行。
下一步，React会设置shouldUpdate为true。这个也是为什么默认情况下我们不需要重写shouldComponentUpdate方法的原因，React中，组件就是默认更新的。之后，检测当前更新是否由forceUpdate更新引起的。 更新一个组件，除了更改state和props外，也是可以通过调用forceUpdate方法来实现的，但是，React官方文档里认为应该避免使用这个方法。这是因为，使用forcuUpdate是导致组件持久化更新，而shouldUpdate会被shouldComponentUpdate方法的返回值重新赋值。如果最终判断组件是不需要被更新的，React还是会设置props和state，但是会跳过更新流程的其他部分。
（未完待续）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95924.html
摘要：接上文，流程图我们已经知道挂载的工作流程，现在我们换个方向研究下方法，这个也是的重要组成部分。这个问题，我们会在下一篇文章中进行解答。。。 接上文， React流程图：https://bogdan-lyashenko.gith... this.setState 我们已经知道挂载的工作流程，现在我们换个方向研究下--setState方法，这个也是React的重要组成部分。 首先，为什么我...
摘要：源码里有个独立的模块管理组件的所有子元素。第一个，实例化子元素使用并挂载它们。至于具体挂载流程，基于子元素类型的不同而有不同的挂载过程。挂载的过程基本完成了。 接上文， React流程图：https://bogdan-lyashenko.gith... 创建初始子组件 在之前的步骤里，组件本身的构建已经完成，接下去，我们分析它们的子元素。总共分为两步：挂载子元素（this.mountC...
摘要：当鼠标事件发生时，组件的最外层会进行处理，然后通过几层包装器的处理后，会开始进行批量更新操作。在这之后，会将这些事件处理成常见到样子。 接上文， React流程图：https://bogdan-lyashenko.gith... 回到最初 在流程图中，也许你已经注意到，setState方法可以通过几种方式触发，更准确的说，可以分为是否由外部引起的（也就是是否由用户触发）。让我们看下如下...
摘要：接着，将返回的元素和之前的进行比较的，以验证是否真的需要更新。我们看下代码，代码比较简单好，对应于我们的这个列子，我们对于方法的更改并不会对方法造成影响。所以我们进入下一步，也就是对于节点的更新。 接上文， React流程图：https://bogdan-lyashenko.gith... 如果组件真的需要更新 在组件刚开始更新过程时，如果有定义componentWillUpdate方...
摘要：接上文，流程图子组件挂载我们继续探究方法。对于我们的实例代码而言，就是标签，所以没有额外的处理过程。属性验证紧接着的被调用的验证方法用于确保被正确设置，否则，会抛出异常。 接上文， React流程图：https://bogdan-lyashenko.gith... 子组件挂载 我们继续探究mount方法。 如果渲染的标签里有复杂的html标签，如video，form，textarea等...
阅读 2844·2019-08-30 15:44
阅读 1828·2019-08-29 13:59
阅读 2817·2019-08-29 12:29
阅读 1079·2019-08-26 13:57
阅读 3187·2019-08-26 13:45
阅读 3317·2019-08-26 10:28
阅读 775·2019-08-26 10:18
阅读 1678·2019-08-23 16:52
