渲染流程
- 首先会执行 render 方法拿到组件的结构
- 如果拿到的结构是 jsx 则会调用 React.createElement() 生成虚拟 DOM
- 根据虚拟 DOM 生成真实 DOM
更新流程
- 组件的 props 或 this.state 发生改变时执行 render() 方法
- 执行完 render() 方法后拿到组件的结构,如果结构是 jsx 则会调用 React.createElement() 生成新的虚拟 DOM
- 将新的虚拟 DOM 和旧的虚拟 DOM 进行 dirr 算法 比较
- 每发现一个新旧 DOM 不一样时,就会创建一个 mutation 对象来记录不同
- 全部比较完毕后,根据 mutation 对象来更新真实 DOM
React-diff 算法思想
- 只会比较同层元素
- 只会比较同位置元素(默认)
- 比较过程中相同类型元素做修改 ,不同类型元素重新创建