深入理解react生命周期

一 hook组件
函数组件的本质是函数，没有state的概念的，因此不存在生命周期一说，仅仅是一个render函数而已。
但是引入hooks之后就变得不同了，它能让组件在不使用class的情况下使用state以及其他的react特性，相比与class的生命周期概念来说，它更接近于实现状态同步，而不是响应生命周期事件。但我们可以利用usestate，useeffect()和uselayouteffect()来模拟实现生命周期。
即：hooks组件更接近于实现状态同步，而不是响应生命周期事件。
下面，是具体的生命周期与hooks的对应关系：
constructor：函数组件不需要构造函数，我们可以通过调用usestate来初始化state。如果计算的代价比较昂贵，也可以传一个函数给usestate。
cosnt [num,updaatenum] = usestate(0)
getderivedstateformprops：一般情况下，我们不需要使用它，我们可以在渲染过程中更新state，以达到实现getderivedstateformprops的目的。
function scrollview({row}){
let [isscorllingddown, setisscrollingdowwn] = usestate(false);
let [prevrow, setprevrow] = usestate(null);
if(row !== prevrow){
// row自上次渲染以来发生过改变。更新isscrollingdown。
setisscrollingdown(prevrow !== null && row > prevrow);
setprevrow(row);
}
return scrolling down:${isscrollingdown};
}
react会立即退出第一次渲染并用更新后的state重新运行组件以避免耗费太多性能。
shouldcomponentupdate：可以用react.memo包裹一个组件来对它的props进行钱比较
const button = react.memo((props)=>{
// 具体的组件
})
注意：react.memo等效于purecomponent,它只钱比较props。这里也可以使用usememo优化每一个节点。
render:这是函数组件体本身。
componentdidmount，componentdidupdata:uselayouteffect与它们两的调用阶段是一样的。但是，我们推荐你一开始先用useeffect，只有当它出问题的时候在尝试使用uselayouteffect。useeffect可以表达所有这些组合。
// componentdidmount
useeffect(()=>{
// 需要在componentdidmount执行的内容
},[])
useeffect(()=>{
// 在componentdidmount，以及count更改时componentdidupdate执行的内容
document.title = you clicked ${count}times;
return ()=>{
// 需要在count更改时componentdidupdate（先于document.title = …执行，尊书先清理后更新）
// 以及componentwillunmount执行的内容
} // 当函数中cleanup函数会按照在代码中定义的顺序先后执行，与函数本身的特性无关
},[count]); // 近在count更改时更新
请记得react会等待浏览器完成画面渲染之后才会延迟调用useeffect，因此会使得额外操作很方便
componentwillunmount：相当于useeffect里面返回的cleanup函数
// componentdidmount/componentwillunmount
useeffect(()=>{
// 需要在componentdidmount执行的内容
return function cleanup(){
// 需要在componentwillunmount 执行的内容
}
},[])
*componentdidcatch and getderivedstatefromerror:目前还没有这些方法的hook等阶写法，但很快会加上。
为方便记忆，大致汇总成表格如下