手把手教你写一个 React 状态管理库
共 8125字,需浏览 17分钟
·
2021-12-01 02:12
自从 React Hooks
推行后,Redux
作为状态管理方案就显得格格不入了。Dan Abramov 很早就提到过 “You might not need Redux”,开发者必须要写很多“模式代码”,繁琐以及重复是开发者不愿意容忍的。除了 actions/reducers/store
等概念对新手不够友好之外,最大的缺点就是它对 typescript
类型支持太烂,在大型项目中这是不可接受的。
通过对 Redux
的优缺点总结来看,我们可以自己写一个状态管理库,本次需要达到的目的:
typescript
类型要完善足够简单,概念要少 与 React Hooks
要搭配
因此,阅读此文档的前提要对 React Hooks
、typescript
等有一定的概念。OK, 那我们开始吧。
思路
目前流行的状态管理库很多都太复杂了,夹杂着大量的概念及 API,我们需要规划着如何实现它。状态管理也就是状态提升的极致表现。我们的目的是要足够简单, API 少。
思考一下,我们是否可以考虑用 Context
去穿透做管理,用最基本的 useState
等 hooks
做状态存储,那么就尝试下吧。
这是三个最简单的函数式组件 Demo,我们用它来试验:
function App() {
return <Card />;
}
function Card() {
return <CardBody />;
}
function CardBody() {
return <div>Textdiv>;
}
实现
我们定义 Context
,一个很基本的状态模型
// 描述 Context 的类型
interface IStoreContext {
count: number;
setCount: React.Dispatch>;
increment: () => void;
decrement: () => void;
}
// 创建一个 Context,无需默认值,这里为了演示方便,用了断言
export const StoreContext = React.createContext(undefined as unknown as IStoreContext);
以及定义基本的 state
,并配合 Context
function App() {
// 定义状态
const [count, setCount] = React.useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
// 包裹 Provider,所有子组件都能拿到 context 的值
return (
<StoreContext.Provider value={{ count, setCount, increment, decrement }}>
<Card />
StoreContext.Provider>
);
}
接下来我们在 CardBody
中使用这个 Context
,使其穿透取值
function CardBody() {
// 获取外层容器中的状态
const store = React.useContext(StoreContext);
return <div onClick={store.increment}>Text {store.count}div>;
}
这样,一个最简单的穿透状态管理的代码写好了。发现问题了吗,状态的业务逻辑写在了 App 组件里,这个代码耦合度太高了!我们来整理一下,需要将 App
的状态通过自定义 hook 抽离出去,保持逻辑与组件的纯粹性。
// 将 App 中的状态用自定义 hook 管理,逻辑和组件的表现抽离
function useStore() {
// 定义状态
const [count, setCount] = React.useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return {
count,
setCount,
increment,
decrement,
};
}
在 App
中使用这个 hook
function App() {
const store = useStore();
return (
<StoreContext.Provider value={store}>
<Card />
StoreContext.Provider>
);
}
现在来看是不是舒心多了,逻辑在单独的 hook 中控制,具有高内聚的特点。想想也许还不够,useStore
和 StoreContext
的逻辑还不够内聚,继续:
将 useStore
和 StoreContext.Provider
抽离成一个组件
const Provider: React.FC = ({ children }) => {
const store = useStore();
return <StoreContext.Provider value={store}>{children}StoreContext.Provider>;
};
再来看 App 组件,是不是很清晰?
function App() {
return (
<StoreProvider>
<Card />
StoreProvider>
);
}
好了,我们可以将这个模式封装成一个方法,通过工厂模式来创建 Context
和 Provider
。
// 将自定义 Hook 通过参数传入
// 定义泛型描述 Context 形状
export function createContainer<Value, State = void>(useHook: (initialState?: State) => Value) {
const Context = React.createContext(undefined as unknown as Value);
const Provider: React.FC<{ initialState?: State }> = ({ initialState, children }) => {
// 使用外部传入的 hook
const value = useHook(initialState);
return <Context.Provider value={value}>{children}Context.Provider>;
};
return { Provider, Context };
}
OK,一个简单的状态管理算成型了。好不好用我们来试试,将之前定义的 useStore
的代码移入 createContainer
里
export const BaseStore = createContainer(() => {
// 定义状态
const [count, setCount] = React.useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return {
count,
setCount,
increment,
decrement,
};
});
在 App
中替换为 BaseStore
导出的 Provider
function App() {
return (
<BaseStore.Provider>
<Card />
BaseStore.Provider>
);
}
在 CardBody
使用 BaseStore
导出的 Context
,因为定义的时候用了泛型,这里能完美识别当前 store
的形状,从而具备编辑器智能提示
function CardBody() {
const store = React.useContext(BaseStore.Context);
return <div onClick={store.increment}>Text {store.count}div>;
}
那么恭喜你,你已经创建了一个属于自己的状态管理库,我们给它取个名字叫 unstated-next
调整
但是方便和性能总是有所取舍的,毫无疑问,成也 Context
,败也 Context
。因为它的穿透无差别更新特性也就决定了会让所有的 React.memo
优化失效。一次 setState
几乎让整个项目跟着 rerender
,这是极为不可接受的。因为自定义 Hook 每次执行返回的都是一个全新的对象,那么 Provider
每次都会接受到这个全新的对象。所有用到这个 Context
的子组件都跟着一起更新,造成无意义的损耗调用。
有方案吗?想一想,办法总比困难多。我们可以优选 Context
上下文的特性,放弃导致重新渲染的特性(即每次传给他一个固定引用)。这样的话状态改变,该更新的子组件不跟着更新了怎么办,有什么办法触发 rerender 呢?答案是 setState
,我们可以将 setState
方法提升到 Context
里,让容器去调度调用更新。
// createContainer 函数中
// 首先我们可以将 Context 设置为不触发 render
// 这里 createContext 第二个参数的函数返回值为 0 即为不触发 render
// 注意:这个 API 非正规。当然也可以用 useRef 转发整个 Context 的值,使其不可变
// 用非正规的 API 仅仅只是为了不用 ref 而少点代码 😄
const Context = React.createContext(undefined as unknown as Value, () => 0);
那现在 Context
已经是不可变了,该如何实现更新逻辑呢?思路可以是这样:我们在子组件 mount
时添加一个 listener
到 Context
中,unMount
时将其移除,Context
有更新时,调用这个 listener
,使其 rerender
。
声明一个 Context
,用来放这些子组件的 listener
// createContainer 函数中
const ListenerContext = React.createContext<Set<(value: Value) => void>>(new Set());
现在子组件中需要这样一个 hook,想选择 store
里的某些状态去使用,无相关的 state
改变不用通知我更新。
那么我们就起个名字叫 useSelector
,用来监听哪些值变化可以让本组件 rerender
。
函数类型可以这样定义:通过传入一个函数,来手动指定需要监听的值,并返回这个值
// createContainer 函数中
function useSelector<Selected>(selector: (value: Value) => Selected): Selected {}
那我们来实现这个 useSelector
。首先是触发 rerender
的方法,这里用 reducer
让其内部自增,调用时不用传参数
const [, forceUpdate] = React.useReducer((c) => c + 1, 0);
这里我们需要和容器中的 Context
通信,从而获取所有状态传给 selector
函数
// 这里的 Context 已经不具备触发更新的特性
const value = React.useContext(Context);
const listeners = React.useContext(ListenerContext);
// 调用方法获取选择的值
const selected = selector(value);
创建 listener
函数,通过 Ref 转发,将选择后的 state
提供给 listener
函数使用, 让这个函数能拿到最新的 state
,
const StoreValue = {
selector,
value,
selected,
};
const ref = React.useRef(StoreValue);
ref.current = StoreValue;
实现这个 listener
函数
function listener(nextValue: Value) {
try {
const refValue = ref.current;
// 如果前后对比的值一样,则不触发 render
if (refValue.value === nextValue) {
return;
}
// 将选择后的值进行浅对比,一样则不触发 render
const nextSelected = refValue.selector(nextValue);
//
if (isShadowEqual(refValue.selected, nextSelected)) {
return;
}
} catch (e) {
// ignore
}
// 运行到这里,说明值已经变了,触发 render
forceUpdate();
}
我们需要在组件 mount/Unmount
的时候添加/移除 listener
React.useLayoutEffect(() => {
listeners.add(listener);
return () => {
listeners.delete(listener);
};
}, []);
完整实现如下:
function useSelector<Selected>(selector: (value: Value) => Selected): Selected {
const [, forceUpdate] = React.useReducer((c) => c + 1, 0);
const value = React.useContext(Context);
const listeners = React.useContext(ListenerContext);
const selected = selector(value);
const StoreValue = {
selector,
value,
selected,
};
const ref = React.useRef(StoreValue);
ref.current = StoreValue;
React.useLayoutEffect(() => {
function listener(nextValue: Value) {
try {
const refValue = ref.current;
if (refValue.value === nextValue) {
return;
}
const nextSelected = refValue.selector(nextValue);
if (isShadowEqual(refValue.selected, nextSelected)) {
return;
}
} catch (e) {
// ignore
}
forceUpdate();
}
listeners.add(listener);
return () => {
listeners.delete(listener);
};
}, []);
return selected;
}
有了 selector
。最后一步,我们来改写 Provider
// createContainer 函数中
const Provider: React.FC<{ initialState?: State }> = ({ initialState, children }) => {
const value = useHook(initialState);
// 使用 Ref,让 listener Context 不具备触发更新
const listeners = React.useRef<Set<(listener: Value) => void>>(new Set()).current;
// 每次 useHook 里面 setState 就会让本组件更新,使 listeners 触发调用,从而使改变状态的子组件 render
listeners.forEach((listener) => {
listener(value);
});
return (
<Context.Provider value={value}>
<ListenerContext.Provider value={listeners}>{children}ListenerContext.Provider>
Context.Provider>
);
};
大功告成!useSelector
返回的新对象都会如同 React.memo
一样做浅对比。API 用法也如同 React-Redux
,毫无学习成本。我们来看看用法
function CardBody() {
// count 一旦变化后,本组件触发 rerender
// 这里如果嫌麻烦,可以使用 lodash 中的 pick 函数
const store = BaseStore.useSelector(({ count, increment }) => ({ count, increment }));
return <div onClick={store.increment}>Text {store.count}div>;
}
值得注意的是,createContainer
函数中返回出去的值不能是每次 render
都重新生成的。我们来修改一下 BaseStore
export const BaseStore = createContainer(() => {
// 定义状态
const [count, setCount] = React.useState(0);
// 之前定义的两个 function 替换为 useMethods 包裹,保证 increment 、decrement 函数引用不变
const methods = useMethods({
increment() {
setCount(count + 1);
},
decrement() {
setCount(count - 1);
},
});
return {
count,
setCount,
...methods,
};
});
这里的 useMethods
Hook 就是我之前有篇文章分析过的,用来代替 useCallback
,源码见 Heo。
锦上添花,可以将 useSelector
结合 lodash.picker
封装一个更常用的 API,取个名字叫 usePicker
// createContainer 函数中
function usePicker<Selected extends keyof Value>(selected: Selected[]): Pick<Value, Selected> {
return useSelector((state) => pick(state as Required, selected));
}
试试效果:
function CardBody() {
const store = BaseStore.usePicker(['count', 'increment']);
return <div onClick={store.increment}>Text {store.count}div>;
}
总结
好了,这就是我当时写一个状态管理的思路,你学会了吗?源码见 Heo,Github 搜 Heo。也是我们正在用的状态管理,它足够轻量、配合 Hooks、完美支持 TS、改造原有代码的难度小。目前已在生产环境中稳定运行了一年多了,最高复杂度的项目为一次性渲染 2000 多个递归结构的组件,性能依然保持得很优秀。欢迎大家 Star。
往期干货:
26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载(免费)
干货~~~2021最新前端学习视频~~速度领取
前端书籍-前端290本高清pdf电子书打包下载
点赞和在看就是最大的支持❤️