在前面的章节中，我们学习了 context 的使用方式，基于它我们可以搞一个自己的状态管理库。不过，他存在性能上的问题，以致于虽然从功能的实现上来说，他非常不错，但是从性能上来说，context 的表现非常糟糕，虽然很少有 React 学习者关注到这个问题，但是如果你关注项目的整体架构，并且想要成为顶尖高手的话，这是你必须掌握的最后一步。
接下来我们会用案例来探讨 context 存在什么样的性能问题，并思考如何设计一个方案来替代 context，解决它的性能问题
一、context 存在啥问题
我们需要通过一个实践案例来分析 context 存在的性能问题。我计划把几个不同的 counter 状态分散放到不同的子组件中去。项目结构如图
+ App - index.tsx - Provider.tsx - Counter01.tsx - Counter02.tsx - Counter03.tsx - Reset.tsx
在入口文件中，使用 Provider 把所有的子组件包裹起来
import Provider from './Provider'; import Counter01 from './Counter01'; import Counter02 from './Counter02'; import Counter03 from './Counter03'; import Reset from './Reset'; /** * @description 性能有问题，子组件每次都会rerender * @returns */ export default function App() { return ( <Provider> <Counter01 /> <Counter02 /> <Counter03 /> <Reset /> </Provider> ) }
在 Provider 中，我们创建好 context，并在 state 中定义好数据，并通过 value 向子组件传递
import {createContext, Dispatch, SetStateAction, useState} from 'react' interface Props { children: any } const initialState = { counter01: 0, counter02: 0, counter03: 0 } type State = typeof initialState interface Value extends State { setCounter01: Dispatch<any>, setCounter02: Dispatch<any>, setCounter03: Dispatch<any> } export const context = createContext<Value>(initialState as Value) export default function Provider(props: Props) { const [state, setState] = useState(initialState) const value = { ...state, setCounter01: (value: number) => setState({...state, counter01: value}), setCounter02: (value: number) => setState({...state, counter02: value}), setCounter03: (value: number) => setState({...state, counter03: value}) } return ( <context.Provider value={value}> {props.children} </context.Provider> ) }
每个子组件里，都会显示一个 counter，并带有一个按钮点击能递增 counter，为了方便查看该子组件是否被 re-render，我们会在内部逻辑中执行 console.log 来观察
import { useContext } from 'react'; import {context} from './Provider' export default function Counter01() { const {counter01, setCounter01} = useContext(context) console.log('counter01: ', counter01) function clickHandle() { setCounter01(counter01 + 1) } return ( <button onClick={clickHandle}> counter01: {counter01} </button> ) }
除此之外，为了验证 memo 的效果，我们还使用 memo 将一个子组件包裹起来
import { useContext, memo } from 'react'; import {context} from './Provider' function Counter03() { const {counter03, setCounter03} = useContext(context) console.log('counter03: ', counter03) function clickHandle() { setCounter03(counter03 + 1) } return ( <button onClick={clickHandle}> counter03: {counter03} </button> ) } export default memo(Counter03)
Reset 组件中只会重置对应的数据为初始状态
import { useContext } from 'react'; import {context} from './Provider' export default function Reset() { const {setCounter01, setCounter02} = useContext(context) console.log('reset'); function clickHandle() { setCounter01(0); // setCounter02(1); } return ( <div> <button onClick={clickHandle}> Reset01 02 to 0 </button> </div> ) }
OK，全部代码大概如此。运行，测试之后，我们发现此时存在严重的 re-render 现象：当我们修改任何一个状态时，所有的子组件都会 re-render，即使这个组件跟这个状态毫无关系。就算你使用 memo 将子组件包裹起来，该子组件依然会 re-render。因此，当你基于 context 开发顶层状态管理器时，你的 React 项目的性能，将会很差。
梳理一下，具体的糟糕表现为：
- 1、任何状态的变化，所有子组件都会 re-render
- 2、子组件包裹 memo 无效
- 3、连续点击 reset 按钮，即使状态没有发生变化，所有子组件也会 re-render
为什么会出现这个问题呢？
我们前面已经分析过，React 组件的 re-render 机制，需要同时保证 state、props、context 都不变，组件才不会 re-render
我们观察一下 Provider 的写法
export default function Provider(props: Props) { const [state, setState] = useState(initialState) const value = { ...state, setCounter01: (value: number) => setState({...state, counter01: value}), setCounter02: (value: number) => setState({...state, counter02: value}), setCounter03: (value: number) => setState({...state, counter03: value}) } return ( <context.Provider value={value}> {props.children} </context.Provider> ) }
在 context 发生变化时，value 总会被重新声明，context.Provider 的 props.value 总是会发生变化，那么他的子组件的稳定结构从顶层就被破坏了，因此当 state 发生变化时，被他包裹的所有子组件都会 re-render。
二、context 的替代方案
在思考 context 的替代方案之前，我们先总结一下 context 的能力。
1、支持全局共享状态
2、支持跨组件传递
那么，我们如何基于 React 现有的机制，做到和 context 一样的事情呢？要单独想到比较困难，但是答案却非常简单。具体的思路是，我们可以利用发布订阅模式，收集每个组件内部的 setState，把共享状态的 satate 收集到一起，然后利用他们各自的 setState 去触发数据的更新即可。这样，我们就可以实现上面的两个要求了。
创建一个 store.ts 文件来完成我们的构想。
首先创建一个对象用来存储所有的数据，并约定好数据的格式
interface StoreItem { value: any, dispatch: Set<any> } interface Store { [key: string]: StoreItem } const store: Store = {}
理解这个数据格式，是整个功能实现的关键。不同的数据会对应不同的 key 值，相同的数据会对应不同的 setState，我们在 store 中用对应的格式把这个关系存储起来。
另外我再单独定义一个对象，去存储每一个状态的初始化状态
interface KeyMap { [key: string]: boolean } const isInitStore: KeyMap = {}
修改数据，本质上是执行 setState，因此，我们需要先定义好一个 set 方法用于触发存储在 dispatch 中的所有 setState 执行，该方法只能在 store 模块内部被调用。
function _setValue(key: string, value: any) { store[key].value = value store[key].dispatch.forEach((cb: any) => { cb(value) }) }
我们还需要定义一个 useSubscribe 用于在子组件内部订阅状态。该方法用于收集每个组件的 setState，并返回当前组件对应的状态，和修改该状态的方法
export function useSubscribe(key: string, value?: any) { const [state, setState] = useState(value || null) // 如果没有被初始化，则初始化一次 if (!isInitStore[key]) { store[key] = { value: value, dispatch: new Set() } isInitStore[key] = true } if (store[key].dispatch.has(setState) === false) { store[key].dispatch.add(setState) } return [state, (_value: any) => _setValue(key, _value)] }
有的时候我们还需要单独调用某个方法去修改全局的状态，因此，我们还需要对外抛出一个 useDispatch 来完成这个需求
export function useDispatch(key: string) { return (value: any) => _setValue(key, value) }
OK，简单的代码，我们的这个功能就设计好了。我们在子组件中使用他们一下试试看。在子组件中使用时，只需要使用 useSubscribe 订阅一下即可。该方法返回了状态值，和修改状态值的 set 方法。
import { useSubscribe } from './store'; export default function Counter01() { const [counter, setCounter] = useSubscribe('counter01') console.log('counter01: ', counter) function clickHandle() { setCounter(counter + 1) } return ( <button onClick={clickHandle}> counter01: {counter} </button> ) }
这里传入的字符串非常关键，如果你在不同的组件中共享同一个数据，那么他们传入的 key 值需要保持一致才能做到共享。例如我们分别定义下面两个组件，他们能共享同一个状态
import { useSubscribe } from './store'; function Counter03() { const [counter, setCounter] = useSubscribe('counter04') console.log('counter03: ', counter) function clickHandle() { setCounter(counter + 1) } return ( <button onClick={clickHandle}> counter03: {counter} </button> ) } export default Counter03
import {useSubscribe} from './store' export default function Counter04() { const [counter, setCounter] = useSubscribe('counter04') console.log('counter04: ', counter) function clickHandle() { setCounter(counter + 1) } return ( <button onClick={clickHandle}> counter04: {counter} </button> ) }
如果我们要单独在别的组件中修改全局状态，则可以利用 useDispatch
import { useDispatch } from './store'; export default function Reset() { const setCounter01 = useDispatch('counter01') const setCounter02 = useDispatch('counter02') const setCounter03 = useDispatch('counter04') console.log('reset'); function clickHandle() { setCounter01(0); setCounter02(0); } function clickHandle03() { setCounter03(0) } return ( <div> <button onClick={clickHandle}> Reset01 02 to 0 </button> <button onClick={clickHandle03}> Reset03 </button> </div> ) }
程序运行起来之后，测试一下。
发现我们不仅实现了全局状态共享，也实现了数据跨组件传递。也解决了 context 引发不相干子组件刷新的问题。甚至组组件连 memo 的优化手段都不需要用，依然能够保持最低代价的 re-render。也就是说，这种方案完美解决了 context 的性能弊病，成为了一个高性能方案。因此，基于你的需求稍微扩展一下，他就能够成为一个强大的状态管理库运用于你的真实项目中。
在前面的篇幅中，我有强调过 React 对 JavaScript 的弱侵入性是他的一大优势。在这个方案里，已经展现出来这一优势的巨大作用。我们有机会利用各种 JavaScript 的解决方案运用到我们的项目中，扩展 React 的项目边界。
三、总结
我们这个方案基于闭包，利用发布订阅模式，在子组件中订阅组件对应的 setState，并在执行时统一触发所有相同状态的 set 方法。如果对我标黑的几个基础知识掌握得比较好的话，对这个方案理解起来会比较容易。否则可能会面临比较大的理解成本。不过也没有关系，加入 React 知命境付费群，可以在群里跟群友进一步探讨该方案，我也会在群里直播讲解该方案
除了我们自己利用发布订阅模式来解决该问题之外，React 官方文档也提供了一个 hook 来达到类似的效果：useSyncExternalStore，因为直接学习它有不少理解成本，因此我们铺垫了本文的方案，后续会专门写一篇文章来学习它，包括我们熟知的状态管理方案 zustand 也是基于这个 hook 来实现。
