React源码学习——render

前言

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

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

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

源码地址：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}