useEffect、useLayoutEffect源码

其实useReducer和useState有点相似，useState之前介绍过是useReducer的语法糖。

我们看两个code 

useEffect(() => {

　　console.log(a)

      timerID.current = setInterval(()=>{

          setCount(count => count + 1);

      }, 1000); 

    }, []);

    

    useEffect(()=>{

　　console.log(b)

        if(count > 10){

            clearInterval(timerID.current);

        }

    });

a会打印一次，而b会一直打印  原因就是第一个useEffect中第二个参数是个数组 

function useEffect(callback,dependencies){

  if(hookStates[hookIndex]){//说明不是第一次,

    let lastDependencies = hookStates[hookIndex];

    let same = dependencies.every((item,index)=>item === lastDependencies[index]);

    if(same){

      hookIndex++;

    }else{

      hookStates[hookIndex++]= dependencies;

      callback();

    }

  }else{//说明是第一次渲染

    hookStates[hookIndex++]= dependencies;

    callback();

  }

}

缓存下来比较每一项是否相等，same为true,因此只会打印一次a,

 

useLayoutEffect

const useLayout = (callback,deps)=>{
            if(hookState[index]){
                let lastDeps = hookStates[index]
                let same = deps.every((item)=>item === lastDeps[index])
                if(same){
                    index++
                }else{
                    Promise.resolve().then(callback)
                }
            }else{
                hookStates[index++] = deps
                Promise.resolve().then(callback)
            }
        }

　　

近些天因为项目中用了很多useState所以我也看了看useReducer，发现原来自己写了那么多useState,看着就烦所以我打算重新理解下useReducer，翻了下useReducer源码终于明白了

最新的理解 2020  /  12  /  5

当我们大量使用useState时，我们其实可以用useReducer去替代 ，useReducer有两个参数，如果第一个是个纯函数，也就是我们常常说的通过状态去区分进行哪种操作。

如果第一个参数穿了null的话，那我们的useReducer就完全和useState是一样的了，该写什么写什么 。所以useState是一个简化的useReucer版本

贴下代码如下：