渲染和更新反应组件的实现代码示例

最近一直在写React，慢慢对它的一些实现产生了好奇。最奇怪的是自定义标签和this.setState的实现，这里不分析JSX是如何解析的，所有的组件都是用ES5编写的。

组件渲染

渲染时，我们将调用渲染方法。像这样：

var SayHi=react . create class({ getinitialstate : function(){ return { verb : ' say : ' }；}，componentWillmount : function(){ console . log('我将挂载')；}，componentdimunt : function(){ console . log('我已经挂载')；}，render : function(){ return react . create element(' div '，null，this.state.verb，' Hello '，this . props . name)；}});react . render(react . create element(SayHi，{name: 'Cynthia'})，document . getelementbyid(' container '))；结果：

页面打印：say:你好辛西娅控制台打印：我将挂载我已经挂载

这些是我画的React对象的一些属性和方法。

调用render方法时，render将调用map方法，根据传入的不同参数，呈现的对象将分为以下三类：* text * native * custom标记

文本

对于文本，React实例化一个文本节点的对象，并调用该对象的挂载方法。在这个挂载方法中，文本被放入一个跨度中，容器组件的innerHTML被调用来呈现。

本地标签

对于本机标记，React实例化一个处理本机标记的对象，并调用该对象的挂载方法。在这个挂载方法中，一个字符串被拼接，并且上面的map方法被递归地重复。最后，拼接后的字符串被放入容器组件的innerHTML中进行呈现。

自定义标签

这应该是大家最好奇的。虽然自定义标记被称为标记，但它实际上是一个类。实例化处理自定义标签的对象后，首先React会处理自定义标签的生命周期方法，然后递归调用子组件的render方法，再调用map方法，直到自定义标签分解为前两个标签。

更新

首先，让我们统一认识。在React中调用this.setState()将使组件更新。调用this.state={}只会更改此组件的状态，但不会使组件更新。

如果我想更新一个组件，我会这样写。

var SayHi=react . create class({ getinitialstate : function(){ return { verb : ' say : ' }；}，componentWillmount : function(){ console . log('我将挂载')；}，componentdimunt : function(){ console . log('我已经挂载')；}，changeVerb:函数(){ this . SetState({ verb : ' write : ' })；} render : function(){ return react . create element(' div '，this.changeVerb.bind(this)，this.state.verb，' Hello '，this . props . name)；}});react . render(react . create element(SayHi，{name: 'Cynthia'})，document . getelementbyid(' container '))；执行结果：

页面打印：say: Hello Cynthia点击文字，页面内容更新为：write: Hello Cynthia

与更新相关的属性和方法如下：

在调用this.setState()之后，还会调用一个map方法。根据传入的参数不同，要更新的标签仍然分为三类：文本、原生标签和自定义标签。具体处理过程如下。

文本

文本节点处理非常简单，判断待更新文本是否与当前文本相等，不相等则删除原文本，插入新文本。

自定义标签

对于自定义标签，首先根据对象的引用和关键字是否相同，判断是否需要更新。如果需要更新，继续调用上面的map方法来更新子组件。这是另一个递归。但是请注意，这里的贴图方法与渲染部分的贴图方法不同。

本地标签

对于原生标签，首先更新组件的属性，然后更新子树，使用diff算法比较新子树和当前标签子树之间的差异，形成差异树，然后使用patch方法将这个差异树更新为真实的DOM树。

摘要

这是一个复杂的过程，让我用流水账再写一遍。我说不出它的本质。以后继续探索，详细写。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。