「React 知命境」第 29 篇
在前面的章节中，我们学习了 context 的使用方式，基于它我们可以搞一个自己的状态管理库。不过，他存在性能上的问题，以致于虽然从功能的实现上来说，他非常不错，但是从性能上来说，context 的表现非常糟糕，虽然很少有 React 学习者关注到这个问题，但是如果你关注项目的整体架构，并且想要成为顶尖高手的话，这是你必须掌握的最后一步。
接下来我们会用案例来探讨 context 存在什么样的性能问题，并思考如何设计一个方案来替代 context，解决它的性能问题
一、context 存在啥问题
我们需要通过一个实践案例来分析 context 存在的性能问题。我计划把几个不同的 counter 状态分散放到不同的子组件中去。项目结构如图
代码语言：javascript复制 App
- index.tsx
- Provider.tsx
- Counter01.tsx
- Counter02.tsx
- Counter03.tsx
- Reset.tsx
在入口文件中，使用 Provider 把所有的子组件包裹起来
代码语言：javascript复制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 向子组件传递
代码语言：javascript复制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 将一个子组件包裹起来
代码语言：javascript复制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 的写法
代码语言：javascript复制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 文件来完成我们的构想。
首先创建一个对象用来存储所有的数据，并约定好数据的格式
代码语言：javascript复制interface StoreItem {
value: any,
dispatch: Set<any>
}
interface Store {
[key: string]: StoreItem
}
const store: Store = {}
理解这个数据格式，是整个功能实现的关键。不同的数据会对应不同的 key 值，相同的数据会对应不同的 setState，我们在 store 中用对应的格式把这个关系存储起来。
另外我再单独定义一个对象，去存储每一个状态的初始化状态
代码语言：javascript复制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 值需要保持一致才能做到共享。例如我们分别定义下面两个组件，他们能共享同一个状态
代码语言：javascript复制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 来实现。
