每天都在用，也没整明白的ReactHook

这也是 React 官方推荐的共享状态的方式，然而在需要共享状态的组件非常多的情况下，这有着严重的性能问题，在上述例子里，哪怕 A 组件只更新 state.a，并没有用到 state.b，B 组件更新 state.b 的时候 A 组件也会刷新，在组件非常多的情况下，就卡死了，用户体验非常不好。好在这个地方有很多种方法可以解决这个问题，这里我要推荐最简单的一种，也就是 react-tracked (https://react-tracked.js.org/) 这个库，它拥有和 useContext 差不多的 api，但基于 proxy 和组件内部的 useForceUpdate 做到了自动化的追踪，可以精准更新每个组件，不会出现修改大的 state，所有组件都刷新的情况。

import { useState } from 'react';
import { createContainer } from 'react-tracked';

// 声明
const initialState = {
  count: 0,
  text: 'hello',
};

const useMyState = () => useState(initialState);

export const { Provider: SharedStateProvider, useTracked: useSharedState } =
  createContainer(useMyState);
  
// 使用
const Counter = () => {
  const [state, setState] = useSharedState();
  const increment = () => {
    setState((prev) => ({ ...prev, count: prev.count + 1 }));
  };
  return (
    

      {state.count}
      +1
    

  );
};

useCallback

一个很常见的误区是为了心理上的性能提升把函数通通使用 useCallback 包裹，在大多数情况下，javascript 创建一个函数的开销是很小的，哪怕每次渲染都重新创建，也不会有太大的性能损耗，真正的性能损耗在于，很多时候 callback 函数是组件 props 的一部分，因为每次渲染的时候都会重新创建 callback 导致函数引用不同，所以触发了组件的重渲染。然而一旦函数使用 useCallback 包裹，则要面对声明依赖项的问题，对于一个内部捕获了很多 state 的函数，写依赖项非常容易写错，因此引发 bug。所以，在大多数场景下，我们应该只在需要维持函数引用的情况下使用 useCallback，例如下面这个例子：

const [userText, setUserText] = useState("");
const handleUserKeyPress = useCallback(event => {
    // do something here
}, []);

useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
        window.removeEventListener("keydown", handleUserKeyPress);
    };
}, [handleUserKeyPress]);

  return (
      

          {userText}
      

  );

这里我们需要在组件卸载的时候移除 event listener callback，因此需要保持 event handler 的引用，所以这里需要使用 useCallback 来保持引用不变。

然而一旦我们使用 useCallback，我们又会面临声明依赖项的问题，这里我们可以使用 ahook 中的 useMemoizedFn (https://ahooks.js.org/zh-CN/hooks/use-memoized-fn) 的方式，既能保持引用，又不用声明依赖项。

const [state, setState] = useState('');
// func 地址永远不会变化
const func = useMemoizedFn(() => {
  console.log(state);
});

是不是觉得很神奇，为什么不用声明依赖项也能保持函数引用不变，而内部的变量又可以捕获最新的 state，实际上，这个 hook 的实现异常的简单，我们只需要用到 useRef 和 useMemo。

/*
  param: fn
  fn每次进来都是新建，引用会变化
  fnRef.current = fn
  fnRef每次持有的都是新的fn，捕获了最新的闭包变量 
  memoizeFn.current只会被初始化一次
  memoizeFn.current指向的函数每次会去调fnRef.current，这样每次都能用fnRef里的新的fn
  这样memoizedFn函数地址不变，同时也捕获了最新的闭包变量
  */
  function useMemoizedFn(fn) {
      const fnRef = useRef(fn);
      fnRef.current = useMemo(() => fn, [fn]);
      const memoizedFn = useRef();
      if (!memoizedFn.current) {
        memoizedFn.current = function (...args) {
          return fnRef.current.apply(this, args);
          }
      }
      return memoizedFn.current;
}

所有需要用到 useCallback 的地方都可以用 useMemoizedFn 代替。

memo & useMemo

对于需要优化渲染性能的场景，我们可以使用 memo 和 useMemo，通常用法如下：

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => , [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => , [b]);
  return (
    <>
      {child1}
      {child2}
    
  )
}

考虑到 useMemo 需要声明依赖项，而 memo 不需要，会自动对所有 props 进行浅比较 (Object.is)，因此大多数场景下，我们可以结合上面提到的 useImmer 以及 useMemoizedFn 保持对象和函数的引用不变，以此减少不必要的渲染，对于 Context 共享的数据，我们可以使用 react-tracked 进行精准渲染，这些库的好处是不需要声明依赖项，能减小维护成本和心智负担，对于剩下的没法 cover 的场景，我们再使用 useMemo 进行更细粒度的渲染控制。

useReducer

相对于上文中提到的这些 hook，useReducer 是我们日常开发过程中很少会用到的一个 hook （因为大部分需要 flux 这样架构的软件一般都直接上状态管理库了）。

但是，我们可以思考一下，在很多场景下，我们真的需要额外的状态管理库么？

我们来看一下下面的这个例子：

const Demo = () => {
    const [state,setState] = {
      isRunning: false,
      time: 0
    };
    const idRef = useRef(0);
    useEffect(() => {
        idRef.current = setInterval(() => setState({ ...state,time: state.time + 1 }),1000);
        return () => clearInterval(idRef.current);
    },[]);
    
    return 

      {state.time}
       setState({...state,isRunning: true}))}>
        Start
      
       setState({ ...state,isRunning: false })}>
        Stop
      
       setState({ isRunning: false, time: 0 })}>
        Reset
      
    

}

这是一个非常简单的计数器例子，虽说运作良好，但是却反映了一个问题，当我们需要同时操作一系列相关的 state 时，在不借助外部状态管理库的情况下，随着程序的规模变大，函数组件内部可能会充斥着非常多的 setState 一系列 state 的操作，这样视图就和实际逻辑耦合起来了，代码变得难以维护，但其实我们不一定需要使用外部的状态管理库解决这个问题，很多时候 useReducer 就能帮我们搞定这个问题，我们尝试用 useReducer 重写一下这个逻辑。

我们先写一个 reducer 的纯函数：

如果看到这里，你已经忘记了reducer之类的概念，我们来复习一下吧。 reducer 通常是一个纯函数，它接受一个action和一个payload，当然还有上一次的state,基于这三者，reducer计算出next state，就是这么简单。

function reducer(state, action) {
  switch (action.type) {
    case 'start':
      return { ...state, isRunning: true };
    case 'stop':
      return { ...state, isRunning: false };
    case 'reset':
      return { isRunning: false, time: 0 };
    case 'tick':
      return { ...state, time: state.time + 1 };
    default:
      throw new Error();
  }
}

我们再来定义一下初始状态以及 action 类型：

const initialState = {
  isRunning: false,
  time: 0
};

// The start action object
{ type: 'start' }
// The stop action object
{ type: 'stop' }
// The reset action object
{ type: 'reset' }
// The tick action object
{ type: 'tick' }

接下来只要用 useReducer 把他们组合起来就行了：

function Stopwatch() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const idRef = useRef(0);
  useEffect(() => {
    if (!state.isRunning) { 
      return; 
    }
    idRef.current = setInterval(() => dispatch({type: 'tick'}), 1000);
    return () => {
      clearInterval(idRef.current);
      idRef.current = 0;
    };
  }, [state.isRunning]);
  
  return (
    

      {state.time}s
       dispatch({ type: 'start' })}>
        Start
      
       dispatch({ type: 'stop' })}>
        Stop
      
       dispatch({ type: 'reset' })}>
        Reset
      
    

  );
}

这样我们就把 reducer 这个状态的变更逻辑从组件中抽离出去了，代码看起来清晰易懂，维护起来也方便多了。

Q: reducer 是个纯函数，如果我需要获取异步数据呢？

A: 可以使用 use-reducer-async (https://github.com/dai-shi/use-reducer-async) 这个库，只要引入一个极小的包，就能拥有 effect 的能力。

import { useReducerAsync } from "use-reducer-async";

const initialState = {
  sleeping: false,};const reducer = (state, action) => {
  switch (action.type) {
    case 'START_SLEEP': return { ...state, sleeping: true };
    case 'END_SLEEP': return { ...state, sleeping: false };
    default: throw new Error('no such action type');
  }};
  
const asyncActionHandlers = {
  SLEEP: ({ dispatch }) => async (action) => {
    dispatch({ type: 'START_SLEEP' });
    await new Promise(r => setTimeout(r, action.ms));
    dispatch({ type: 'END_SLEEP' });
  },};
  
const Component = () => {
  const [state, dispatch] = useReducerAsync(reducer, initialState, asyncActionHandlers);
  return (
    

      {state.sleeping ? 'Sleeping' : 'Idle'}
       dispatch({ type: 'SLEEP', ms: 1000 })}>Click
    

  );};

结语

React Hook 心智负担真的很重，希望 react-forget  (https://zhuanlan.zhihu.com/p/443807113) 能早日 production ready。