React Hook: 手动实现useState

react hook当中提供了useState钩子函数，能够实现在函数当中创建状态和改变状态的方法，并支持多次调用。下面来一步步实现一个简易的useState。

首先，根据useState的用法，调用时传入一个初始值，并返回一个数组，第一项为创建的状态，第二项为更改该状态的方法。

const [count, setCount] = useState(0)

因此，我们先根据这个要求声明一个满足上述条件的函数：

let state
function useState(initialState) {
  state = state ? state : initialState
  function setState(newState) {
    state = newState
    render()
  }
  return [state, setState]
}

// 因为状态更改要刷新视图，因此这里用ReactDom.render方法来模拟更改状态后刷新视图的操作
function render() {
  ReactDom.render(, document.getElementById('root'))
}

说明一下，这里state为什么不声明在函数内部而是外部呢？因为函数组件每当状态改变都会重新调用，如果声明在函数内部，在重新调用时就无法缓存住上次更改后的状态，又会重新被设置为初始值，因此需要声明在外部，在状态更改函数重新调用时依然可以缓存上次修改的状态值。

上述代码中的useState函数可以实现创建并修改状态，而且可以在状态修改后自动刷新视图。但是还不支持多次调用声明多个状态。很显然，一个state是无法缓存多个不同的状态值的，如果想要存储多个状态值，并且能和修改状态的方法一一对应，最好的办法就是将state和setState都声明为数组，将内部的值按照索引来对应存储。

// 存储状态的数组
let state = []
// 存储更改状态方法的数组
let setters = []
// 用来记录状态和更改状态方法对应关系的下标
let stateIndex = 0

function createSetter(index) {
  return function (newState) {
    state[index] = newState
    render()
  }
}

function useState(initialState) {
  state[stateIndex] = state[stateIndex] ? state[stateIndex] : initialState
  // 采用闭包缓存每个state对应的setState
  setters.push(createSetter(stateIndex))
  const value = state[stateIndex]
  const setter = setters[stateIndex]
  // 每创建完一组都要+1，用来作为下一组状态的索引
  stateIndex++
  return [value, setter]
}

// 因为状态更改要刷新视图，因此这里用ReactDom.render方法来模拟更改状态后刷新视图的操作
function render() {
  // 每次调用render都要重置stateIndex，否则对应的索引无限递增将无法正确匹配state和setState之间的关系
  stateIndex = 0
  ReactDom.render(, document.getElementById('root'))
}

以上，useState的基本功能就已经实现了。将其代替react中的useState引入组件可看到效果。

这里的全局只是模拟，在react中，每个函数的状态都是作为函数的属性而存在的，并非全局。这样就不会造成变量污染，并且会跟随函数的声明周期创建和销毁。