初探hooks实现与原理

在使用hooks的过程中，大家可能会有一些疑惑。比如为什么useState只能在函数最外层调用，useEffect第二个参数的作用等。今天，我们来实现几个简单的hooks，并从中了解一些其原理。
1.useState
我们首先来实现useState。函数式组件没有实例，每次渲染都会重新执行useState函数。
我们声明一个lastState来保存上一次的状态。第一次渲染的时候执行useState，此时lastState没有值，将useState的参数作为初始值。在useState中定义一个setState的方法，来改变lastState的值。另外每次setState后要重新render。最终useState返回一个数组，里面包含上一个状态和改变状态的方法。以下为useState的简单实现。

let lastState;
function useState(initialState) {
  lastState = lastState || initialState;
  function setState(newState) {
    lastState = newState;
    render();
  }
  return [lastState, setState];
}
function Counter() {
  let [state, setState] = useState(0);
  return (
    <>
      <p>{state}</p>
      <button onClick={() => setState(state + 1)}>+</button>
    </>
  )
}
function render() {
  ReactDOM.render(
    <Counter />,
    document.getElementById('root')
  );
}
render();

如果有多个state的时候，那么上面的写法就不适用了。lastState应该声明为一个数组，并且需要相对应有一个索引。要注意的是每次执行useState后需要让index加一，并且每次render后索引需要重置为0。

let lastState = [];
let index = 0;
function useState(beginState) {
  lastState[index] = lastState[index[|| beginState;
  const currentIndex = index;
  function setState(newState) {
    lastState[currentIndex] = newState;
    render();
  }
  return [lastState[index++], setState];
}
function App() {
  let [state, setState] = useState(0);
  return (
    <div>
      <span>{state}</span>
      <button onClick={() => setState(state + 1)}>+</button>
    </div>
  )
}
function render() {
  index = 0;
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
}
render();

可以看出，每次渲染时state跟index是一一对应的，所以这也是不能把useState放到条件语句中的原因。所以在使用 Hook 的时候，我们应该在函数组件最外层使用。

2.useReducer
reducer接收两个参数，原有状态和动作，通过派发动作来改变状态，最后返回一个新状态。useReducer的实现和useState相似。

function reducer(state, action) {
  if (action.type === 'add') {
    return state + 1;
  } else {
    return state;
  }
}
let lastState;
function useReducer(reducer, beginState) {
  lastState = lastState || beginState;
  function dispatch(action) {
    lastState = reducer(lastState, action);
    render();
  }
  return [lastState, dispatch];
}
function Counter() {
  let [state, dispatch] = useReducer(reducer, 0);
  return (
    <div>
      <span>{state}</span>
      <button onClick={() => dispatch({ type: 'add' })}>+</button>
    </div>
  )
}

3、useEffect
effect在这里是副作用的意思，我们可以在这个hooks中执行一些有副作用的行为，比如操作dom，通过ajax发送网络请求等。它里边的函数会在组件每次render后执行。而第二个参数我们称之为依赖项，如果其中的元素在每次渲染时和前一次相比没有发生变化，就不会触发这个副作用。下边的实现没有包括销毁副作用的功能。

let lastDependencies;
function useEffect(callback, dependencies) {
  if (lastDependencies) {
    let changed = !dependencies.every((item, index) => {
      return item == lastDependencies[index];
    });
    if (changed) {
      callback();
      lastDependencies = dependencies;
    }
  } else {//没有渲染过
    callback();
    lastDependencies = dependencies;
  }
}
function App() {
  let [number, setNumber] = useState(0);
  useEffect(() => {
    console.log('看看数字是否变化了呢', number);
  }, [number]);
  return (
    <div>
      <span>{number}</span>
      <button onClick={() => setNumber(number + 1)}>+</button>
    </div>
  )
}
function render() {
  ReactDOM.render(
    <Counter />,
    document.getElementById('root')
  );
}
render();

当依赖项为空的时候，我们会发现它只会执行一次，此时我们可以用useEffect来模拟componentDidMount生命周期。依赖项的比较是用的‘==’而不是‘===’，因此我们可以得知依赖项的对比是浅比较。
我们对于effect的实现比较简单，还有很多细节没有体现出来。在上面的代码中，每次执行useEffect都会打印最新的number值，那么它是如何读取到最新的state的呢。并不是number的值在“不变”的effect中发生了改变，而是每一次渲染中的effect的count值都来自于它属于的那次渲染。因为effect是在渲染完成后执行的，我们可以把它当作渲染结果的一部分。

4、useCallback和useMemo
在之前的文章中我们有了解过这两个性能优化的hooks。它们的实现和前面的hooks也很相似。

let lastCallback;
let lastCallbackDependencies;
function useCallback(callback, dependencies) {
  if (lastCallbackDependencies) {
    let changed = !dependencies.every((item, index) => {
      return item == lastCallbackDependencies[index];
    });
    if (changed) {
      lastCallback = callback;
      lastCallbackDependencies = dependencies;
    }
  } else {
    lastCallback = callback;
    lastCallbackDependencies = dependencies;
  }
  return lastCallback;
}
let lastMemo;
let lastMemoDependencies;
function useMemo(callback, dependencies) {
  if (lastMemoDependencies) {
    let changed = !dependencies.every((item, index) => {
      return item == lastMemoDependencies[index];
    });
    if (changed) {
      lastMemo = callback();
      lastMemoDependencies = dependencies;
    }
  } else {//没有渲染过
    lastMemo = callback();
    lastMemoDependencies = dependencies;
  }
  return lastMemo;
}

在本文中我们实现了一个最简单的hooks，主要借助的是数组这个简单的数据结构，一定成程度上了解了hooks的原理。但是在React的源码中，它是通过类似单链表的形式而不是数组。有空应该去读一读源码，菜会有更深入的理解。