渲染元素 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