使用Reacthooks实现类所有生命周期.docx

第

使用Reacthooks实现类所有生命周期

目录应该在什么时候使用Hooks呢？class生命周期在Hooks中的实现注意事项在React16.8之前，函数组件也称为无状态组件，因为函数组件也不能访问react生命周期，也没有自己的状态。react自16.8开始，引入了Hooks概念，使得函数组件中也可以拥有自己的状态，并且可以模拟对应的生命周期。

应该在什么时候使用Hooks呢？

官方并不建议把原有的class组件，大规模重构成Hooks，而是有一个渐进过程:

首先，原有的函数组件如果需要自己的状态或者需要访问生命周期函数，那么用Hooks是再好不过了；另外就是，可以先在一些逻辑较简单的组件上尝试Hooks，在使用起来相对较熟悉，且组内人员比较能接受的前提下，再扩大Hooks的使用范围。

那么相对于传统class，Hooks有哪些优势

StateHook使得组件内的状态的设置和更新相对独立，这样便于对这些状态单独测试并复用。Hook将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分，这样使得各个逻辑相对独立和清晰。

class生命周期在Hooks中的实现

Hooks组件更接近于实现状态同步，而不是响应生命周期事件。但是，由于先熟悉的class的生命周期，在写代码时，难免会受此影响，那么Hooks中如何模拟class的中的生命周期呢：

总结：

class组件Hooks组件constructoruseStategetDerivedStateFromPropsuseEffect手动对比props，配合useState里面update函数shouldComponentUpdateReact.memorender函数本身componentDidMountuseEffect第二个参数为[]componentDidUpdateuseEffect配合useRefcomponentWillUnmountuseEffect里面返回的函数componentDidCatch无getDerivedStateFromError无

代码实现：

importReact,{useState,useEffect,useRef,memo}fromreact;

//使用React.memo实现类似shouldComponentUpdate的优化，React.memo只对props进行浅比较

constUseEffectExample=memo((props)={

console.log(=====UseStateExamplerender=======);

//声明一个叫“count”的state变量。

const[count,setCount]=useState(0);

const[count2,setCount2]=useState(0);

const[fatherCount,setFatherCount]=useState(props.fatherCount)

console.log(props);

//模拟getDerivedStateFromProps

useEffect(()={

//props.fatherCount有更新，才执行对应的修改，没有更新执行另外的逻辑

if(props.fatherCount==fatherCount){

console.log(=======模拟getDerivedStateFromProps=======);

console.log(props.fatherCount,fatherCount);

}else{

setFatherCount(props.fatherCount);

console.log(props.fatherCount,fatherCount);

//模拟DidMount

useEffect(()={

console.log(=======只渲染一次(相当于DidMount)=======);

console.log(count);

},[])

//模拟DidUpdate

constmounted=useRef();

useEffect(()={

console.log(mounted);

if(!moun