导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

渲染元素 ReactDOM.render

html 中的 div 容器叫根节点

根节点内的所有的内容都是由 ReactDOM 进行管理

一个 React 应用一般只有一个根节点

用 ReactDOM.render 方法将 react 元素渲染到根节点中

第一个参数接受一个 React 元素：

1. React.createElement(…)
2. JSX ⇒ (<div>...</div>)
3. 类组件 JSX 形式 ⇒ <SWButton />

这样才能使类组件内部的 render 函数、函数组件执行

const rEl = <h1 className='title'>This is a title.</h1>

/**
 * @param ReactElement  - react 元素
 * @param rootNode      - 根节点
 */
ReactDOM.render(
  rEl,
  document.getElementById('app')
)

更新的基本逻辑

React 元素是不可变的对象 immutable Object

1. 不能添加展性
2. 不能修改属性
3. 不能删除属性
4. 不能修改属性的枚举、配置、可写
   1. enumerable/configurable/writable