手写 React 第 2 节 - 初探 React 实现机制

怼烎@ 2022-11-21 01:19 136阅读 0赞

### 手写 React 第 2 节 - 初探 React 实现机制 ###

*   *   *  前言
         *  1. jsx 语法
         *  2. createElement 实现
         *  3. ReactDOM.render 实现

### 前言 ###

在上一节[【手写 React 第1节 - 从零搭建一个 React】][React _1_ - _ React]中讲到如何从零搭建一个 React 架子，本节主要介绍如何实现这样的一个简易 React。

### 1. jsx 语法 ###

JSX 是由 React 的存在而诞生的，它是一种由 Javascript 和 XML 结合的语法格式。其作用是在 JS 文件中更方便地书写 HTML 。其实现原理是利用 HTML 语法来创建虚拟DOM。当遇到<，就当成 HTML 来解析，遇到大括号 \{ ，就当 JavaScript 来解析。

在 React 和 babel 中，这一实现过程是由 `@babel/preset-react` 来完成。安装 `@babel/preset-react` 之后需要在 webpack.config.js 中配置如下。其中 pragma 表示 jsx 语法编译时执行的函数，默认为 React.createElement。如下图我配置成了 React.createElementText。那么在实现 React.createElement 这个函数的功能时就需要写成 React.createElementText。

module.exports = { 
       module:{ 
            rules:[
                { 
                    test: /\.js$/,
                    exclude: path.resolve(__dirname, 'node_modules'),
                    include: path.resolve(__dirname, 'src'),
                    loader:'babel-loader',
                    options:{ 
                        presets: [
                           [ "@babel/preset-react",
                            { 
                                "pragma": "React.createElementText", // default pragma is React.createElement
                            }]
                        ],
                    }
                },
                { 
                    test: /\.css$/,
                    use:['style-loader','css-loader']  // 从右到左执行，所以注意顺序
                }
            ]
        },
    }

比如我们在写如下代码时：

const App = (
        <div>
            <h1 className="border">Mini React</h1>
        </div>
    )

`@babel/preset-react` 实际上将它转移成如下形式：

var App = React.createElement("div", null, 
    React.createElement("h1", { 
      className: "border"
    }, "Mini React")
    );

可以通过 [【babel 官网】][babel]的【试一试】功能，在线实时转义 jsx 语法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]

所以在看源码的时候，我们只需要关注 React.createElement 如何实现。

### 2. createElement 实现 ###

var App = React.createElement("div", null, 
    React.createElement("h1", { 
      className: "border"
    }, "Mini React")
    );

通过以上代码我们可以分析，createElement 接收的参数分别如下：  
第一个参数是原生节点的标签，定义为 type。  
第二个参数是该节点的一些属性，定义为 config。  
第三个参数是该节点的子节点，定义为 children。

我们在 React 中实际使用到的属性只有 props 和 state。state 涉及到界面更新，暂时忽略。所以我们需要将 config 和 children 合并到 props 属性中。

其中：  
config 中的对象直接添加到 props 中即可。  
children 可能涉及到多个，有可能是对象，有可能直接是文本节点。比如上面案例中第二个子节点的 children 就是 “Mini React”。又因为所有的 children 都是 \{type:"",props:\{\}\} 结构，所以需要对文本节点单独处理。可以设置为 \{type:“TEXT”,props:\{children: \[\],nodeValue:""\}\} 。

function createElement(type,config,...children) { 
        const props = { 
             //直接添加到props
            ...config,
            //区分对象还是文本节点
            children:children.map((child)=>typeof child ==='object'?child:createElementText(child))
        }
        return{ 
            type,
            props
        }
    }
    function createElementText(child) { 
        return{ 
            type:"TEXT",
            props:{ 
                children:[],
                nodeValue:child
            }
        }
    }
    const React = { 
        createElement
    }
    export default React;

### 3. ReactDOM.render 实现 ###

通过 createElement 实现了基础的组件结构之后，接下来需要将虚拟的 DOM 节点插入到原生的根节点中。

ReactDOM.render(App,document.getElementById('root'));

通过以上代码我们知道 render 就是将 App 这个虚拟 DOM 节点插入到 id 为 root 的真实根节点中。  
我们需要做以下 5 件事情：

1.  将 App 这个虚拟 DOM 转换为真实的 DOM 节点，然后通过 `appendChild` 插入到根节点中。

function render(vnode,container) { 
        //将虚拟节点转换为真实节点，并插入到根节点中
        let node = createDOMNode(vnode);
        container.appendChild(node);
    }

1.  要想获取真实的 DOM 节点，就需要创建节点，通过判断 type 来决定创建那种类型的节点。

1.  如果节点为字符串（原生节点标签），就通过 `document.createElement` 来创建。如果节点为文本，就通过 `document.createTextNode` 来创建。

1.  将 App 下面的子节点转换为真实的 DOM 节点，插入到 App 节点。

1.  具有层级结构的节点挂载好之后，需要将 class 等 props 添加到真实的节点中。

完整代码如下：

以上主要实现了 type 类型为原生节点标签和文本节点类型的组件，那么如何实现函数组件和类组件呢？请关注下一节的内容。。。

[React _1_ - _ React]: https://editor.csdn.net/md/?articleId=109303571
[babel]: https://www.babeljs.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f6f12c3864a54003a79535a555ac82cb.png