react-useState

简单明了的 hooks 函数原理。

我们在开发react组件时，用 useState 创建用户的状态，并且在组件重复渲染时，useState 总能记录返回上一次的状态，而不是像常规的调用普通函数那样，每一次都是新的一次的调用。

抛开钩子，react组件渲染以及相关概念，钩子函数的描述如下：

A 函数内部调用 B 函数。 B 函数可以记录由A函数修改的上一次的状态，而不是表现的像普通函数那样，每一次都是一个全新的调用。虽然B函数每次都会因为A函数的调用而调用，但是B函数能记录上一次的状态。

A 函数就是组件。
A 函数调用就是组件渲染。
B 函数就是 useState 钩子函数。

知道了钩子函数的本质，实现起来就很简单了。

function createState () {
  let isCalled = false, value = null
  return function (initValue) {
    if (isCalled === false) {
      // 记录是否是第一次调用
      value = initValue
      isCalled = true
    }
    function setValue (newVal) {
      // updateDom --> 在这个更新dom结构。
      value = newVal
    }

    return [value, setValue]
  }
}

const useStateHook = createState()

function App2 () {
  const [name, setName] = useStateHook('jack')
  console.log(name)
  setName(name + '!!')
}


App2() // jack
App2() // jack!!
App2() // jack!!!!