封装 useUpdate 钩子

上一篇博客里面提到了，函数组件在模仿类组件的生命周期钩子时，需要使用 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>
                                                         )
                                                     }