掌握hook原理之如何手写useState

  useState的使用

 如下:const [count,setCount] = useState(1)

  useState传入了一个初始值,使用了解构赋值返回了两个值, 一个属性一个方法

 

现在我们已经掌握了它的用法，那么我们开始分析它的原理

 

useState的原理

我们先写一个简易版本的

   let hookState;
    function useState(intlValue){
      hooState = hooState || intlValue
      function setState(newState){
        hookState = newState
      }
      return [hookState,setState]
    }

现在我们来使用它

  const [count,setCount] = useState(1)
  setCount(5)

但是我们多次useState，会产生多个useState解构出来的值都是同一个值，改变的也都是同一个值，为了解决这种情况，我们来升级一下

    let hookState = [];
    let index = 0
    function useState(intlValue) {
      hookState[index] = hookState[index] || intlValue
      let currentIndex = index
      //利用闭包保存函数
      function setState(newState) {
        hookState[currentIndex] = newState 
      }
      //下次使用useState index为index+1
      index++
      return [hookState[index], setState]
    }

    const [count, setCount] = useState(1)
    const [number, setNumber] = useState(1)
    setCount(5)
    setNumber(8)
    console.log(setCount === setNumber) //false
    console.log(useState === useState)//true

 现在我们可以多次useState了，知道原理我们就能更好的使用hook了

参考：https://blog.csdn.net/gtLBTNq9mr3/article/details/93547670