React源码学习——render

我就是我 2022-12-21 06:08 121阅读 0赞

## 前言 ##

本文的目的是为了通过简单的实现帮助读者更好地阅读源码，因此不会把所有的细节、边界条件都考虑到

只要核心原理掌握了，再阅读源码时就不会感到那么困惑了

本文写作时React版本已经到React17了，所以写法上将会使用React17的风格

源码地址：[https://github.com/facebook/react][https_github.com_facebook_react]

--------------------

## render 使用 ##

先看一下 `render` 的使用方式，然后由表及里探究

import { Component} from 'react'
    import ReactDOM from 'react-dom'
    
    import './index.css'
    
    class ClassComponent extends Component { 
    	render() { 
    		return (
    			<div className='border'>
    				<p>{ this.props.name}</p>
    			</div>
    		)
    	}
    }
    
    function FunctionComponent(props) { 
    	return (
    		<div className='border'>
    			<p>{ props.name}</p>
    		</div>
    	)
    }
    
    const jsx = (
    	<div className='border'>
    		<p>原生标签</p>
    		<FunctionComponent name='函数组件' />
    		<ClassComponent name='类组件' />
    
    		<>
    			<h3>fragment中的内容</h3>
    		</>
    	</div>
    )
    
    ReactDOM.render(jsx, document.getElementById('root'))

`render` 要处理的情况有

*  文本标签
 *  原生标签
 *  函数组件
 *  类组件
 *  Fragment

--------------------

## render ##

1.  将 `vnode` 转换为真实 `DOM`
2.  将转换后的 `DOM` 挂载到容器上

function render (vnode, container) { 
      // 1.将vnode转换为真实DOM
      const node = createNode(vnode)
      // 2.将转换后的DOM挂载到容器上
      container.appendChild(node)
    }

此处引用到的其他函数:

*  createNode()

--------------------

## createNode ##

1.  将 `vnode` 转换为真实 `DOM`

function createNode(vnode) { 
      let node = null
      const { type} = vnode
      if (typeof type === 'string') {  // 原生标签
    	node = updateHostComponent(vnode)
      } else if (typeof type === 'function') { 
    	node = type.prototype.isReactComponent ? 
    	  ? updateClassComponent(vnode) // 类组件
    	  : updateFunctionComponent(vnode) // 函数组件
      } else if (type.toString() === 'Symbol(react.fragment)') { 
    	// Fragment
    	node = document.createDocumentFragment()
    	updateFragment(props.children, vnode)
      }
      return node
    }

此处引用到的其他函数：

*  updateHostComponent()
 *  updateClassComponent()
 *  updateFunctionComponent()
 *  updateFragment()

备注：

在这里判断是类组件还是函数组件的条件，是判断 `type` 的原型链上是否有 `isReactComponent` 这个属性

在源码中，类组件和函数组件的本质都是函数，因此通过添加一个标识属性来进行区别

--------------------

## updateHostComponent ##

这个函数用于处理原生标签的转换

先看一下它作为 `vnode` 时长什么样子

这个 jsx 的结构如下:

![原生标签虚拟DOM][DOM]  
![原生标签虚拟DOM2][DOM2]  
根据得到的虚拟DOM(js对象)，可得到以下处理原生标签的函数

function updateHostComponent(vnode) { 
      const { type, props} = vnode
      const node = document.createElement(type)
      if (typeof props.children === 'string') { 
        // 文本节点
    	let childText = document.createTextNode(props.children)
    	node.appendChild(childText)
      } else { 
    	// 对 children 再执行 render
    	reconcileChildren(props.children, node)
      }
    
      // 传递属性
      updateNode(node, props)
      return node
    }

此处引用到的其他函数:

*  reconcileChildren()
 *  updateNode()

--------------------

## reconcileChildren ##

对传入的 `children` 进行遍历 `render`，再挂载到父节点上

在本文中先写一个简版，只能用于初次渲染，具体的解析请关注后续文章

function reconcileChildren(children, node) { 
      if (Array.isArray(children) { 
    	for (let index = 0; index < children.length; index++) { 
    	  const child = children[index]
    	  render(child, node)
    	}
      } else { 
    	render (children, node)
      }
    }

此处引用到的其他函数：

*  render()

我们回顾一下 `render` 的写法

function render(vnode, container) { 
      // 1.将vnode转换为DOM
      const node = createNode(vnode)
      // 2.将转换后的DOM挂载到容器上
      container.appendChild(node)
    }

这里已经形成一个闭环了

接下来看一下其他要处理的情况

--------------------

## updateFunctionComponent ##

先看一下解析一个函数组件能得到一个什么样的 `js对象`

function FunctionComponent(props) { 
      return (
        <div className='border'>
          <p>{ props.name}</p>
    	</div>
      )
    }
    
    const jsx = (
      <div className="border">
    	<FunctionComponent name="函数组件"/>
      </div>
    )
    
    ReactDOM.render(jsx, document.getElementById('root'))

![函数组件虚拟DOM][DOM 1]  
注意这里得到的 `type` 是一个函数

这个特性虽然在负责渲染函数组件的函数中用不到，但它在 `createNode()` 中是一个判断条件

函数组件本质上就是个函数，而它的 `jsx` 是通过执行函数 `return` 出来的，因此我们要做的事有：

1.  执行函数，得到一个 vnode
2.  将这个 vnode 传递给 createNode()

function updateFunctionComponent(vnode) { 
      const { type, props} = vnode
      // 1.执行 type 得到 vnode
      const _vnode = type(props)
      // 2.将这个 vnode 传递给 createNode()
      return createNode(_vnode)
    }

此处用到的其他函数：

*  createNode()

--------------------

## updateClassComponent ##

class ClassComponent extends Component { 
      render() { 
    	return (
    	  <div className='border'>
    		<p>{ this.props.name}</p>
    	  </div>
    	)
      }
    }
    
    const jsx = (
      <div className="border">
    	<ClassComponent name="类组件"/>
      </div>
    )
    
    ReactDOM.render(jsx, document.getElementById('root'))

![类组件虚拟DOM][DOM 2]  
注意：

这里的 `type` 的原型链上有个 `isReactComponent` 的标识，这是用来区分函数组件和类组件的标识

处理类组件的思路和处理函数组件的类似，也是要先拿到其中的虚拟DOM，再将其交给 `createNode()` 处理

但是类组件和函数组件拿到虚拟DOM的方法不一样，在类组件中需要：

1.  将组件实例化
2.  执行得到实例的 `render()` 方法
3.  将得到的虚拟DOM交给 `createNode()`

function updateClassComponent(vnode) { 
      const { type, props} = vnode
      // 1.将组件实例化
      const instance = new type(props)
      // 2.执行得到实例的render()
      const _vnode = instance.render()
      // 3.将得到的虚拟DOM交给 createNode()
      return createNode(_vnode)
    }

此处用到的其他函数：

*  createNode()

--------------------

## updateFragment ##

const jsx = (
      <div className="border">
    	<>
    	  <h3>996好累啊~~~~~</h3>
    	  <h3>不想上班啊~~~~~</h3>
    	</>
      </div>
    )
    
    ReactDOM.render(jsx, document.getElementById('root'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70_pic_center]

处理 `Fragment` 的思路很简单

1.  创建一个 `fragment节点`
2.  遍历其 children 然后逐一 render，并挂载到创建的 `fragment节点` 上

function updateFragment(children, node) { 
      reconcileChildren(children, node)
    }

--------------------

## updateNode ##

这个函数的作用是将属性赋予到节点上

在源码中会在这个函数中做很多细节处理，这里就简单实现一下

function updateNode(node, val) { 
      Object.keys(val)
      	.filter(k => k !== 'children')
      	.forEach(k => node[k] = val[k])
    }

--------------------

## Component ##

类组件继承的 `Component`

在这里只实现能让代码跑起来的步骤

export default function Component(props) { 
      this.props = props
    }
    
    Component.prototype.isReactComponent = { }

--------------------

## 总结 ##

关于 `render` 可以分为两大部分去看：

1.  根节点的操作  
    `render()`  
    `createNode()`  
    `updateNode()`  
    `reconcileChildren()`
2.  针对各情况的具体操作  
    `updateHostComponent()`  
    `updateFunctionComponent()`  
    `updateClassComponent()`  
    `updateFragment()`

看了之后还是不明白他们之间的关系的同学，可以将上文的代码手写到一张纸上

因为一个屏幕没办法一下子展示所有的内容，所以可能有的同学会看了下文忘了上文

而写到一张纸上,他们之间的关系就一目了然了

最后再附上源码地址：[https://github.com/facebook/react][https_github.com_facebook_react]

感谢你能看到这里~

[https_github.com_facebook_react]: https://github.com/facebook/react
[DOM]: /images/20221120/7b495a5fd3ab47bc946b1fe220a5ebc5.png
[DOM2]: /images/20221120/6e6cd92aeb6b4517b96af32569aef505.png
[DOM 1]: /images/20221120/b30414b208624e64ac4c2c86ee70dad2.png
[DOM 2]: https://img-blog.csdnimg.cn/20201115113814639.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/2020111511592462.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk,size_16,color_FFFFFF,t_70#pic_center