第三节：ReactDOM.render

html 中的div#app 是容器的根元素

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

一般的React项目只有一个根节点 → 也可以是多个

基本的更新逻辑

1 → react 元素是不可变的对象 （immutable Object)

• 不能添加属性
• 不能修改属性
• 不能删除
• 不能修改属性的枚举、配置、不可写 → enumerable/configurable/writable

const rEl = <h1 className="title">This is my first JSX experience</h1>

delete rEl.props;//error
rEl.props = 122;//error
rEl.a = 1;//error

ReactDOM.render(
  rEl,
  document.getElementById('app')
)

观察element的更新状态

• ReactDOM.render 会深度对比新老元素的变化，只会做必要的真实DOM渲染
• 虚拟节点的对比 → diff 算法了

渲染之前 → 每个React元素组成一个虚拟DOM的对象结构 → 渲染

更新之前 → 形成一个新的虚拟DOM的结构 → 然后再对比新的和旧的虚拟DOM节点 → 分析不同点 → 形成DOM更新得补丁 → 操作真实DOM

class Title extends React.Component{
  render() {
    return <h1>11223</h1>
  }
}

ReactDOM.render(
  // <Title />,//写法一
  React.createElement(Title),//写法二
  document.getElementById('app')
)

总结：

ReactDOM.render → 第一个参数一定是一个react元素

1 → 组件使用JSX语法 →

2 → React.createElement(Title) 把组件转为react元素