React Hook之useState、useReducer的使用和源码分析

React Hook

16.8以前
一般使用类组件或者函数组件；

前者有完整的生命周期API，可以管理组件状态，但是this指向在使用时需要格外注意一；一般通过HOC实现复用；通过shouldComponentUpdate()或者PureComponent组件进行性能优化，防止不必要的更新。

后者是函数组件，一般是传入的数据进行展示，没有生命周期，只有props,是无状态组件；

16.8以后
新增了React Hook特性，它是函数组件，但是通过hook钩子可以管理内部状态，而且可以调用生命周期；通过钩子的依赖项还可以控制组件更新时机；还可以通过自定义hook抽出部分逻辑进行复用；基本上可以算是以上两者的结合升级；

1. 只能在顶层调用hook，因为react里通过链表来记录hook，靠着hook的调用顺序的值state对应的setState，所以要确保每次渲染组件hook的顺序一致
2. 只能在函数组件中，或者自定义hook中使用；

---

useState的使用

useState是用来定义和维护函数组件state的钩子，算是用来替代class组件里的constructor构造函数。

1. 定义state

该方法接受一个可选初始state值；可以是一个变量，可以是一个有返回值的方法。
返回一个数组，通过数组结构方式得到state名和更新state的方法(名称都是任意指定的，语义清晰即可)；

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

// js里使用
const [list, setList] = useState([]);
const [count, setCount] = useState(() => {
   return value});

// ts里使用,指定类型
const [value, setValue]: [string, any] = useState('');
// 通过泛型指定
const [loading, setLoading] = useState<boolean>(false);

2. 读取state

通过定义时指定的state变量名直接引用即可

<div>{
   count}</div>

3. 更新state

通过定义state时指定的更新方法并传入新值即可

<div onClick={
   () => {
   setCount(count + 1)}}>{
   count}</div>

useState的源码分析

hooks是存储在fiber实例memoizedState属性上的一个链表；

找到useState对外暴露的API（ReactHook.js专门导出hook的文件）

export function useState<S>(initialState: (() => S) | S) {
   
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

resolveDispatcher是什么呢？

// ReactHooks.js
function resolveDispatcher() {
   
  const dispatcher = ReactCurrentDispatcher.current;
  // 一些警告提示
  return dispatcher;
}

所以这些hook都是在ReactCurrentDispatcher.current上的属性；
再来看看ReactCurrentDispatcher的定义；

// ReactCurrentDispatcher.js
const ReactCurrentDispatcher = {
   
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: (null: null | Dispatcher),
};

知道了ReactCurrentDispatcher的结构后，我们来找一下ReactCurrentDispatcher.current是在什么时候赋值的；

// ReactFiberHooks.js
function renderWithHooks(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  props: any,
  refOrContext: any,
  nextRenderExpirationTime: ExpirationTime,
): any {
   
  // ...
  nextCurrentHook = current !== null ? current.memoizedState : null;
  // 省略一些提示和_DEV_的配置
  ReactCurrentDispatcher.current =
      nextCurrentHook === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;
}

再来看看HooksDispatcherOnMount和HooksDispatcherOnUpdate分别是什么

const HooksDispatcherOnMount: Dispatcher = {
   
  readContext,
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  useDebugValue: mountDebugValue,
};
const HooksDispatcherOnUpdate: Dispatcher = {
   
  readContext,
  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect