渲染流程

• 首先会执行  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 算法思想

• 只会比较同层元素
• 只会比较同位置元素（默认）
• 比较过程中相同类型元素做修改 ，不同类型元素重新创建