【Under-the-hood-ReactJS-Part5】React源码解读

接上文，

React流程图：
https://bogdan-lyashenko.gith...

更新DOM属性

在更新DOM属性这一步，主要的目标就是将之前的props和当前props的差异高效的更新到DOM上。下面是源码里的注释：

发现属性差异后进行合并，并且在需要时进行DOM更新。这个方法很可能是性能优化的路径上的最关键的单一方法。（“Reconciles the properties by detecting differences in property values and updating the DOM as necessary. This function is probably the single most critical path for performance optimization.”）

在这里会进行两次循环。第一次，遍历上一次的props，然后再遍历下一次的props。
在我们的案例中，挂载时，lastProps（上一次的属性）是空值（因为这是我们第一次进行赋值），不过，我们还是可以看看里面发生了什么

循环前props

在这个循环的第一步中，我们会检查nextProps是否包含相同的属性值。如果有的话，对于这些属性值我们会先跳过，因为它们会在之后的nextprops循环中被处理掉。然后，我们会重置样式，删除事件监听器（如果之前有设置的话），移除DOM属性和DOM属性值。对于属性的处理，我们需要确保它们不是RESERVED_PROPS中的保留关键字，那些是真正的组件属性，如children，dangerouslySetInnerHTML。

循环后props

在这个循环的第一步中，首先需要检查prop是否改变了，也就是检查属性的下一个值是否和之前的不同。如果是相同的话，则什么都不需要做。对于样式（你应该发现对于样式的处理有些特殊），如果根lastProp相比有变化的，React会更新其值。然后，添加会事件监听器（就像onClick等等）。下面，我们进一步的进行分析。

注意，在整个React应用的运行过程中，所有的事件都是通过名为合成事件（synthetic events）的东西进行传递的。所谓的合成事件，就是为了更高效的使React工作而组装的一些包装器。而管理事件的中介模块就是就是EventPuginHub（srcrendererssharedstackeventEventPluginHub.js）。它包含了一个名为listenerBank的map对象进行监听器的缓存和光临。我们需要把我们的事件监听器加入其中，不过不是现在，而是在组件和DOM元素已经准备好处理事件的时候。在这里，看起来好像我们延迟了事件的执行，你可以会问，我们如何获知事件发生的那一刻呢？不知道你是否还记得我们会在所有的方法调用里传递transaction这个事务对象，之所以这样做，就是为了让我们能够更方便的处理这种上面疑问的场景，看下代码：

//src\renderers\dom\shared\ReactDOMComponent.js#222
transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,
    registrationName: registrationName,
    listener: listener,
});

在处理完事件监听器后，我们需要设置DOM属性和属性值。就像上面说的那样，我们需要确保这些属性不是RESEVED_PROPS的保留关键字，那些是真正的组件属性，如children和djangerouslySetInnerHTML。

在处理属性的前后差异过程中，我们会计算出styleUpdates的配置，然后把它传递给CSSPropertyOperations模块。

现在，我们已经完成对属性更新的过程的分析，我们可以继续下一步了。
（未完待续）