上一篇博客里面提到了，函数组件在模仿类组件的生命周期钩子时，需要使用 React 推出的 useEffect() 方法，这个方法接收两个参数，第一个是要执行的函数，第二个参数是空，或一个数组，表示函数的调用时机。基于 useEffect() 方法我们可以模仿类组件的大部分生命周期钩子，但是有一个不行，就是 componentDidUpdate()。
之所以不能模仿类组件的 componentDidUpdate() 钩子是因为，useEffect 在监听变量变化时会将变量从无到有的过程也算作是一次变化，而在类组件中 componentDidUpdate() 钩子是不会监听数据的第一渲染时的变化的。
基于上述背景，我们尝试自己封装一个 hook ，来模拟类组件中的 componentDidUpdate() 钩子。
/*封装useUpdate()*/ import useUpdate from './useUpdate.js' const useUpdate = (fun, variable){ const App = props => { const [count, setCount] = usestate(0); const [n, setN] = React. useState(0); useEffect(() => { const addN = () => { setCount(count => count+1); setN(n+1); }, variable); } useEffect(() => { useUpdate (() => { if(count > 1){ console.Log(' 数据发生变化了') fun(); }, variable) }, [count]); return ( }； <div>{n} export default useUpdate <button onclick={ addN}>+1</button> </div> ) }
