React hooks 状态管理方案解析

本文作者：EllieSummer

React v16.8 之后，Function Component 成为主流，React 状态管理的方案也发生巨大的转变。Redux 一直作为主流的 React 状态管理方案，虽然提供了一套规范的状态管理流程，但却有着让人饱受诟病的问题：概念太多、上手成本高、重复的样板代码、需要结合中间件使用等。

一个真正易用的状态管理工具往往不需要过多复杂的概念。Hooks 诞生之后，代码优雅简洁变成一种趋势。开发者也倾向于用一种小而美、学习成本低的方案来实现状态管理。因此，除了 React local state hooks 之外，社区还孵化了很多状态管理库，如 unstated-next、hox、zustand、jotai 等。

关于状态管理，有个非常经典的场景：实现一个计数器，点击 + 号的时候将数字加一，点击 - 号的时候将数值减一。这几乎是所有状态管理库标配的入门案例。

本文将从实现「计数器」这个经典场景出发，逐步分析 Hooks 时代下，React 状态管理方案的演进过程和背后的实现原理。

React local state hooks

React 提供了一些管理状态的原生 hooks API，简洁易懂，非常好上手。用原生的 hooks 方法就可以很轻松地实现计数器功能，只要通过 useState 方法在根组件定义计数器的状态和改变状态的方法，并层层传递给子组件就可以了。

源码

// timer.js
const Timer = (props) => {
  const { increment, count, decrement } = props;
  return (
    <>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </>
  );
};

// app.js
const App = () => {
    const [count, setCount] = React.useState(0);
    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);

    return <Timer count={count} increment={increment} decrement={decrement} />
}
复制代码

但是这种方法存在很严重的缺陷。

首先，计数器的业务逻辑和组件耦合严重，需要将逻辑进行抽象分离，保持逻辑与组件的纯粹性。

其次，多组件内共享状态是通过层层传递的方式实现的，带来冗余代码的同时，根组件的状态将会逐渐变成 “庞然大物”。

unstated-next

React 开发者在设计之初，也考虑到上面提到的两个问题，本身也提供了对应的解决方案。

React Hooks 就是打着「逻辑复用」的口号而诞生的，自定义 hook 可以解决以前在 Class Component 组件内无法灵活共享逻辑的问题。

因此，针对业务逻辑耦合的问题，可以提取一个自定义计数器 hook useCount 。

function useCount() {
    const [count, setCount] = React.useState(0);
    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
    return { count, increment, decrement };
}
复制代码

为了避免组件间层层传递状态，可以使用 Context 解决方案。Context 提供了在组件之间共享状态的方法，而不必在树的每个层级显式传递一个 prop 。

因此，只需要将状态存储在 StoreContext 中，Provider 下的任意子组件都可以通过useContext获取到上下文中的状态。

// timer.js
import StoreContext from './StoreContext';

const Timer = () => {
    const store = React.useContext(StoreContext);
    // 组件内 render 部分先省略
}

// app.js
const App = () => {
    const StoreContext = React.createContext();
    const store = useCount();

    return <StoreContext.Provider value={store}><Timer /></StoreContext.Provider>
}
复制代码

这样代码看起来清爽了一些。

但是在使用的时候还是免不了要先定义很多 Context，并且在子组件中进行引用，略微有点繁琐。

因此，可以对代码进行进一步的封装，将 Context 定义和引用的步骤抽象成公共的方法 createContainer。

function createContainer(useHook) {
	// 定义 context
    const StoreContext = React.createContext();
    
    function useContainer() {
        // 子组件引用 context
        const store = React.useContext(StoreContext);
        return store;
    }

    function Provider(props) {
        const store = useHook();

        return <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>
    }

    return { Provider, useContainer }
}
复制代码

createContainer 封装后会返回两个对象 Provider 和 useContainer。 Provider 组件可以传递状态给子组件，子组件可以通过 useContainer 方法获取全局的状态。经过改造，组件内的代码就会变得非常精简。

const Store = createContainer(useCount);

// timer.js
const Timer = () => {
    const store = Store.useContainer();
    // 组件内 render 部分先省略
}

// app.js
const App = () => {
    return <Store.Provider><Timer /></Store.Provider>
}
复制代码

这样，一个基本的状态管理方案成型了！体积小，API 简单，可以说是 React 状态管理库的最小集。源码可以见这里。

这种方案也是状态管理库 unstated-next 的实现原理。

hox

先不要高兴得太早。unstated-next 的方案虽好，但也有缺陷的，这也是 React context 广为人诟病的两个问题：

Context 需要嵌套 Provider 组件，一旦代码中使用多个 context，将会造成嵌套地狱，组件的可读性和纯粹性会直线降低，从而导致组件重用更加困难。
Context 可能会造成不必要的渲染。一旦 context 里的 value 发生改变，任何引用 context 的子组件都会被更新。

那有没有什么方法可以解决上面两个问题呢？答案是肯定的，目前已经有一些自定义状态管理库解决这两个问题了。

从 context 的解决方案里，其实可以得到一些启发。状态管理的流程可以简化成三个模型： Store（存储所有状态）、Hook （抽象公共逻辑，更改状态）、Component（使用状态的组件）。

如果要自定义状态管理库，在脑海中可以先构思下，这三者之前的关系应该是怎么样的？

订阅更新：初始化执行 Hook 的时候，需要收集哪些 Component 使用了 Store
感知变更： Hook 中的行为能够改变 Store 的状态，也要能被 Store 所感知到
发布更新： Store 一旦变更，需要驱动所有订阅更新的 Component 更新

只要完成这三步，状态管理基本上就完成了。大致思路有了，下面就可以具体实现了。

状态初始化

首先需要初始化 Store 的状态，也就是 Hook 方法执行返回的结果。同时定义一个 API 方法，供子组件获取 Store 的状态。这样状态管理库的模型就搭出来了。

从业务代码使用方法上可以看出，API 简洁的同时，也避免了 Provider 组件嵌套。

// 状态管理库的框架
function createContainer(hook) {
    const store = hook();
    // 提供给子组件的 API 方法
    function useContainer() {
        const storeRef = useRef(store);
        return storeRef.current;
    }
    return useContainer;
}

// 业务代码使用：API简洁
const useContainer = createContainer(useCount);

const Timer = () => {
	const store = useContainer();
    // 组件内 render 部分先省略
}
复制代码

订阅更新

为了实现 Store 状态更新的时候，能够驱动组件更新。需要定义一个 listeners 集合，在组件初始化的时候往数组添加 listener 回调，订阅状态的更新。

function createContainer(hook){
    const store = hook();

    const listeners = new Set();    // 定义回调集合
    
    function useContainer() {
        const storeRef = useRef(store);
    
        useEffect(() => {
            listeners.add(listener);  // 初始化的时候添加回调，订阅更新
            
            return () =>  listeners.delete(listener) // 组件销毁的时候移除回调
        },[])
        return storeRef.current;
    }

    return useContainer;
}
复制代码

那么当状态更新后，如何驱动组件更新呢？这里可以利用 useReducer hook 定义一个自增函数，使用 forceUpdate 方法即可让组件重刷。

const [, forceUpdate] = useReducer((c) => c + 1, 0);

function listener(newStore) {
    forceUpdate();
    storeRef.current = newStore;
}
复制代码

感知状态变更

状态变更驱动组件更新的部分已经完成。现在比较重要的问题是，如何感知到状态发生变更了呢？

状态变更是在 useCount Hook 函数内实现的，用的是 React 原生的 setState 方法，也只能在 React 组件内执行。因此，很容易想到，如果使用一个函数组件 Executor 引用这个 Hook，那么在这个组件内就可以初始化状态，并感知状态变更了。

考虑到状态管理库的通用性，可以通过 react-reconciler 构造一个 react 渲染器来挂载 Executor 组件，这样就可以分别支持 React、ReactNative 等不同框架。

// 构造 react 渲染器
function render(reactElement: ReactElement) {
  const container = reconciler.createContainer(null, 0, false, null);
  return reconciler.updateContainer(reactElement, container);
}

// react 组件，感知 hook 内状态的变更
const Executor = (props) => {
    const store = props.hook();
    const mountRef = useRef(false);
    
    // 状态初始化
    if (!mountRef.current) {
        props.onMount(store);
        mountRef.current = true;
    }

    // store 一旦变更，就会执行 useEffect 回调
    useEffect(() => {
        props.onUpdate(store); // 一旦状态变更，通知依赖的组件更新
    });

    return null;
};
function createContainer(hook) {
    let store;
    const onUpdate = () => {};

    // 传递hook和更新的回调函数		
    render(<Executor hook={hook} onMount={val => store = val}  onUpdate={onUpdate} />);

    function useContainer() {}
    return useContainer;
}
复制代码

精确更新

一旦感知到状态变更后，在 onUpdate 回调里可以通知之前订阅过更新的组件重新渲染，也就是遍历 listeners 集合，执行之前添加的更新回调。

const onUpdate = (store) => {
    for (const listener of listeners) {
      listener(store);
    }
}
复制代码

但是，组件往往可能只依赖了 Store 里的某一个状态，所有组件都更新的操作太粗暴，会带来不必要的更新，需要进行精确的更新渲染。因此，可以在组件的更新回调里判断当前依赖的状态是否变化，从而决定是否触发更新。

// useContainer API 扩展增加依赖属性
const store = useContainer('count'); // 组件仅依赖store.count值

// 更新回调里判断
function listener(newStore) {
    const newValue = newStore[dep];          
    const oldValue = storeRef.current[dep];

    // 仅仅在依赖发生变更，才会组件进行更新
    if (compare(newValue, oldValue)) {
        forceUpdate();
    }
    storeRef.current = newStore;
}
复制代码

完成以上的步骤，一个简单又好用的状态管理库就实现啦！源码可以看这里。状态更新的流程如下图所示。

API 简洁，逻辑和 UI 分离，能跨组件传输状态，没有冗余的嵌套组件，并且能实现精确更新。

这也是状态管理库 hox 背后的实现原理。

zustand

关于如何感知状态变更这一节中，因为 useCount 函数中是通过操作 react 原生 hook 方法实现状态变更的，所以我们需要用 Executor 作为中间桥梁来感知状态变更。

但是，这其实是一种委屈求全的方案，不得已将方案复杂化了。试想下，如果变更状态的方法 setState 是由状态管理库自身提供的，那么一旦执行该方法，就可以感知状态变更，并触发后续的比较更新操作，整体流程会简单很多！

// 将改变状态的 setState 方法传递给 hook
// hook内一旦执行该方法，即可感知状态变更，拿到最新的状态
function useCount(setState) {
  const increment = () => setState((state) => ({ ...state, count: state.count + 1 }));
  const decrement = () => setState((state) => ({ ...state, count: state.count - 1 }));
  return { count: 0, increment, decrement };
}

复制代码

function createContainer(hook) {
    let store;
    
    const setState = (partial) => {
        const nexStore = partial(store);
		// hook中一旦执行 setState 的操作，且状态变更后，将触发 onUpdate 更新
        if(nexStore !== store){
            store = Object.assign({}, store, nexStore);
            onUpdate(store);
        }
    };
    // 将改变状态的方法 setState 传递给hook函数
    store = hook(setState);
}

const useContainer = createContainer(useCount);
复制代码

这种方案更加高明，让状态管理库的实现更加简洁明了，库的体积也会小不少。源码可见这里。

这种方案是 zustand 背后的大致原理。虽然需要开发者先熟悉下对应的写法，但是 API 与 Hooks 类似，学习成本很低，上手容易。

总结

本文从实现一个计数器场景出发，阐述了多种状态管理的方案和具体实现。不同状态管理方案产生都有着各自的背景，也有着各自的优劣。

但是自定义状态管理库的设计思想都是差不多的。目前开源社区比较活跃的状态管理库大多是如此，不同点主要是在如何感知状态变更这块做些文章。

看完本文，想必你已经知道如何进行 React Hooks 下的状态管理了，那就赶紧行动吧！

本文发布自网易云音乐技术团队，文章未经授权禁止任何形式的转载。我们常年招收各类技术岗位，如果你准备换工作，又恰好喜欢云音乐，那就加入我们 grp.music-fe (at) corp.netease.com！