第一种更新：组件更新的逻辑，当修改了相关状态，组件会更新

1.触发shouldComponentUpdate 周期函数:是否允许更新

shouldComponentUpdate(nextProps, nextState) {
// nextState: 存储要修改的最新状态
// this. state:存储的还是修改前的状态「此时状态还没有改变」
console. log(this.state, nextState); .
//此周期函数需要返回t rue/false
//返回true: 允许更新,会继续执行下一-个操作
//返回false: 不允许更新，接下来啥都不处理
return true;
}

2.触发时机componentWillUpdate周期函数:更新之前
此周期函数也是不安全的，在这个阶段，状态还没有被修改

3.修改状态值/属性值「让this. state. xxx改为最新的值」

4.触发render周期函数:组件更新

按照最新的状态/属性，把返回的JSX编译为virtua LDOM，和上一次渲染出来的virtua LDOM进行对比「DOM-DIFF」，把差异的部分进行渲染「渲染为真实的DOM」

5.触发componentD idUpdate周期函数:组件更新完毕

特殊说明:如果我们是基于this . forceUpdate()强制更新视图，会跳过shou ldComponentUpdate周期函数的校验，直接从WillUpdate开始进行更新，也就是:视图一定会触发更新！！！哪怕我们数据没有改变也会直接更新！！！！

---

第二种更新：父组件调用子组件

父子组件嵌套，处理机制上遵循深度优先原则:父组件在操作中，遇到子组件，一定是把子组件处理完，父组件才能继续处理

父组件第一次渲染
父willMount >父render->子willMount >子render >子didMounty >父didMount

父组件更新:
父shouldUpdate ->父willUpdate ->父render->子willReceiveProps ->子shouldUpdate ->子shoudComponentUpdate（如果为true才继续后面的步骤）->子willUpdate ->子render ->子didUpdate->父didUpdate

---

类组件和函数组件对比

函数组件是“静态组件”:
组件第一次渲染完毕后，无法基于"内部的某些操作”让组件更新，无法实现“自更新”;但是，如果调用它的父组件更新了，那么相关的子组件也
定会更新，可能传递最新的属性值进来;
1.函数组件具备:属性…「其他状态等内容几乎没有」
2.优势:比类组件处理的机制简单，这样导致函数组件渲染速度更快! !

类组件是“动态组件”:
组件在第一渲染完毕后，除了父组件更新可以触发其更新外，我们还可以通过: this. setState修改状态 或者this.forceUpdate 等方式,让组件实现"自更新”! !
1.类组件具备:属性、状态、周期函数、ref… r几乎组件应该有的东西它都具备」
2.优势:功能强大! !