react中的jsx丶实现原生dom的渲染丶函数组件丶类组件的首次渲染实现

Posted 2021-10-14 lin-fighting

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react中的jsx丶实现原生dom的渲染丶函数组件丶类组件的首次渲染实现相关的知识，希望对你有一定的参考价值。

jsx

jsx在babel的帮助下可以转换为react.createElement方法的调用，如

PURE是treeshaking的时候用的，标志这是个纯函数。
新老版本的区别
在17之前，我们需要显示引入React，然后Babel转化为React.CreateElement方法，而新的版本中不需要显示引入React，react会自动转化为（Object.s_jsx）方法。
JSX只是react提供的一个语法糖，react元素是构建react应用的最小单位。如，let elemtn = < div>13</ div>,这个element就是一个react元素。打印一下看看

{
    "type": "div", 元素的类型
    "key": null, diff算法用到，用来区分同个父亲不同儿子
    "ref": null, 获取真实dom ref的时候会用到
    "props": { 属性
        "children": "123123" 
    },
    "_owner": null,
    "_store": {}
}

这就是一个react元素，所谓的虚拟dom，也就是一个普通的js对象。

所谓的渲染就是按照react元素描述的结构，创建真实的dom元素，并插入到root容器内。会由ReactDom这个对象来确保浏览器的真实dom与虚拟dom是一致的。
就好比设计师设计出了图纸，工人根据其图纸在指定地点建造房子，房子的造型的图纸是一致的。

JSX表达式

表达式就是变量，常量，操作符混合在一起的组合，是可以计算的，而且肯定会有一个返回值。
如

{
    "type": "div",
    "key": null,
    "ref": null,
    "props": { //属性
        "style": {
            "color": "red"
        },
        "children": "123world"
    },
    "_owner": null,
    "_store": {}
}

返回一个react元素。

JSX可以作为函数的参数和返回值。
效果是一样的。

元素的更新

React元素本身是不可变的，即react元素（这个对象是不可扩展的，react17前可以扩展，就好比freeze冻结住了，freeze不可扩展，不可删除，不可修改，浅冻结，seal，不可扩展，可以删除可以修改）的属性，是只读的，不可改。react内部使用了freeze，比如：
可以通过创建新的元素来重新render。ReactDom.render更新不是全量更新，只会更新该更新的部分。

实现原生dom的渲染（react15）

实现createElement以及ReactDom.render
流程

先定义一个Jsx

用babel转换就是

createElement的实现

我们先实现createElement方法

createElement返回一个虚拟dom对象，需要做的处理是children的处理，有多个的话就要数组，一个的话就直接赋值。

效果：第一个是我们自己写的，第二个是React.createElement转化的。
因为后续会实现domdiff，所以必须对文本节点做一些特殊处理，也转换城虚拟dom对象。
定义类型

处理文本节点为虚拟do’m

对每个children进行处理

文本节点已经被处理为虚拟dom了。

render的实现

1 创建真实dom

通过createDom创建真实的dom

Props处理

先处理第一次渲染的Props。第一次主要就是处理style，事件。

props处理后就处理children

判断是多个子节点还是一个文本节点，文本节点直接赋值，多个节点就需要reconclierChildren方法，最后返回出去，因为这是createDom方法。需要返回一个dom

reconclier方法主要是递归拿到children，然后再去render递归遍历这也是react15的缺点，递归遍历无法中断。

函数组件 react15的函数组件是无状态的，所以我们先实现无状态的函数组件，

组件类似于js的函数，接受任意入参props，返回用于描述页面内容的react元素。

可以看到type值已经变成了函数。
也就是
把函数组件当作createElement的第一个值传入。效果是一样的。

实现渲染函数组件

因为我们是自己写的createElement，所以这里也换成自己写的。
首先，在createDom中需要判断函数组件。

调用mountFunctionComponent方法并返回，因为CreateDom需要返回一个dom。

这里直接执行该函数，将props传进去，然后拿到虚拟dom对象，再去调用createDom并返回。
效果
正常渲染。