React18原理: 渲染与更新时的重点关注事项

最新推荐文章于 2025-07-29 15:32:18 发布

原创

最新推荐文章于 2025-07-29 15:32:18 发布 · 1.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #前端框架

概述

react 在渲染过程中要做很多事情，所以不可能直接通过初始元素直接渲染
还需要一个东西，就是虚拟节点，暂不涉及React Fiber的概念，将vDom树和Fiber 树统称为虚拟节点
有了初始元素后，React 就会根据初始元素和其他可以生成虚拟节点的东西生成虚拟节点
React一定是通过虚拟节点来进行渲染的

常用节点类型

除了初始元素能生成虚拟节点以外，还有哪些可能生成虚拟节点？总共有多少节点类型?

1. Dom节点 (ReactDomComponent)

此dom非彼dom, 这里的dom指的是虚拟dom节点，当初始化元素的type属性为字符串的时候
React 就会创建虚拟dom节点，例如，前面使用 jsx 直接书写的 const B = <div></div>
它的属性就是div, 可以打印出来 { type: 'div' }

2. 组件节点 (ReactComposite)

class组件和函数式组件
type 有两类：class App 或 f Test() 这种举例

3. 文本节点 (ReactTextNode)

直接书写字符串或数字，React 会创建为文本节点

比如，我们可以直接用 ReactDOM.render 方法直接渲染字符串或数字

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

// root.render('一头猪') // 创建文本节点
root.render(1111); // 创建文本节点

4. 空节点(ReactEmpty)

我们平时写 React 代码的时候，经常会写三目表达式 {this.state.xxx ? <App/> : false}
用来进行条件渲染，只知道为 false 就不会渲染，到底是怎么一回事？
其实，遇到字面量 null, false, true, undefined 在 React 中均会被创建一个空节点

在渲染过程中，如果遇到空节点，那么它将什么都不会做

import ReactDOM from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(flase); // 创建空节点 // root.render(true);
// 创建空节点 root.render(null)
root.render(undefined) // 创建空节点