通过实现 createElement、Component 和 render 深入理解React 原理

文章主要是通过官网和源码学习之后，对 React 核心 API 加入了自己的理解和总结。注意代码中将react 版本锁定在17.0.0 之前。

createElement

简单粗暴，我们先来看下面这段代码：

import React from 'react'
import ReactDOM from 'react-dom'

function HelloMessage(props) {
    return (
        <div>
            hello, {props.name}
           <span>尝试一起来写个简易的react core api</span>}
        </div>
    )
}

ReactDOM.render(
<HelloMessage name='lxcy' />, 
document.getElementById('root'));

我们知道，JSX其实是语法糖，17.0.0 版本前通过Babel将jsx转换成React.createElement(type,config,children)的函数调用，React.createElement方法主要是对一系列参数「type,key,ref,props,childrend」进行处理，最终创建并返回虚拟dom，这也是我们为何在头部引入React 的缘故；17.x版本之后，不需要显示导入import React from 'react'，babel对jsx进行了新的转换不需要依React.createElement，babel编译后会自动导入

import { jsx as _jsx } from 'react/jsx-runtime'，
...
return _jsx(type, config, children)

我们可以通过