初探hooks实现与原理

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

let lastState;
function useState(beginState) {
  lastState = lastState || beginState;
  function setState(newState) {
    lastState = newState;
    render();
  }
  return [lastState, setState];
}
function Counter() {
  let [state, setState] = useState(0);
  return (
    <div>
      <span>{state}</span>
      <button onClick={() => setState(state + 1)}>+</button>
    </div>
  )
}
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的源码中，它是通过类似单链表的形式而不是数组。有空应该去读一读源码，才会有更深入的理解。