03 渲染元素ReactDOM.render

• React与ReactDOM是2个不同的库，根节点内的所有内容（和DOM更新、渲染相关）由ReactDOM来管理
• 一个React应用只有一个根节点
• 用ReactDOM.render将React元素渲染到根节点

ReactDOM.render

• 参数1 React元素（React.createElement(类组件/函数组件) or <类组件/函数组件/> or JSX语法组件）包裹后函数组件才会执行
• 参数2 根节点

基本的更新逻辑

• React元素是不可变的对象 immutable Object
• 不能添加属性
• 不能修改属性（但不是深度的不可变）
• 不能删除属性
• 不能修改属性的枚举、配置、可写 （enumerable/configrable/writable）

虚拟DOM

ReactDOM.render会深度对比新旧元素的状态，只会做必要的真实DOM更新

• 渲染之前 → 每个React元素组成一个虚拟DOM的对象结构 → 渲染
• 更新之前 → 形成新的虚拟DOM对象结构 → 对比新旧虚拟DOM节点 → 分析出两者不同处 → 形成一个DOM更新的补丁 → 操作真实DOM

function