React-diff算法和React-其它内容-StrictMode.md

原创

杨不易呀

发布于 2023-09-30 14:58:50

1750

发布于 2023-09-30 14:58:50

文章被收录于专栏：杨不易呀

React 渲染流程

执行 render 方法

<div>
    <div><p>我是段落</p></div>
    <div><span>我是span</span></div>
</div>

将 JSX 转换成 createElement

React.createElement("div", null,
    React.createElement("div", null,
        React.createElement("p", null, "我是段落")),
    React.createElement("div", null,
        React.createElement("span", null, "我是span"))
);

执行 createElement 创建虚拟 DOM, 得到虚拟 DOM 树

{
 targetName: 'div',
 children:[
    {
     targetName: 'div',
     children:[
        {
         targetName: 'p'
        }
     ]
    },
    {
     targetName: 'div',
     children:[
        {
         targetName: 'span'
        }
     ]
    }
 ]
}

根据虚拟 DOM 树在界面上生成真实 DOM

React 更新流程

props/state 发生改变
render 方法重新执行
将 JSX 转换成 createElement
利用 createElement 重新生成新的虚拟 DOM 树
新旧虚拟 DOM 通过 diff 算法 进行比较
每发现一个不同就生成一个 mutation
根据 mutation 更新真实 DOM

React-Diff 算法

只会比较同层元素
只会比较 同位置 元素(默认)

在比较过程中:

同类型元素做修改
不同类型元素重新创建

官方文档：https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm

React-其它内容-StrictMode

StrictMode 概述

作用: 开启 严格模式, 检查后代组件中是否存在潜在问题

注意点:

和 Fragment 一样, 不会渲染出任何 UI 元素
仅在 开发模式 下有效

StrictMode 检查什么

检查过时或废弃的属性 / 方法 / ...

检查意外的副作用:

检查被包裹的组件当中写的一些逻辑代码会被调用多次时，是否会产生一些副作用

index.js:

import React from "react";
import {createRoot} from "react-dom/client";
import App from "./App";

// 为提供的创建一个 React 根container并返回根。
const root = createRoot(document.getElementById("root"));

// 根可用于将 React 元素渲染到 DOM 中
root.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
);

app.js:

import React from 'react';

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        console.log('constructor');
    }

    render() {
        return (
            <div id={'app'}>
                <p ref={'myRef'}>我是段落</p>
                <button onClick={() => {
                    this.btnClick()
                }}>按钮
                </button>
            </div>
        )
    }

    btnClick() {
        console.log(this.refs.myRef);
    }
}

export default App;