React状态管理|青训营笔记

104 阅读3分钟

关心的是 "哲学"。

之前开玩笑说,其实 Redux 用一行代码就可以表示,却写出了论文规格昏昏欲睡的文档:

createStore = (reducer, state) => ({ dispatch: action => (state = reducer(state, action)) }); 而几乎所有 React 状态管理器的原理,其实都很简单,一个 "观察者模式" 的实现:

在各个组件中订阅 listener,state 更新时,再把 listener 都调用一遍,从而触发组件更新。

  1. 为什么是 Hooks? React class 组件存在以下问题:

this.state 是一个对象,每次更新局部,更新时也可新加 state 进去,这就让 state 整体比较混沌。 使用高阶组件等模式时,会造成 this.props 中的数据来源不透明,同样混沌。 因为 this 魔法指针的存在,很容易挂一大堆东西上去,互相随意调用,就会让逻辑缠绕。 为了解决以上问题,React 引入了 Hooks:

将混沌的 state 打散为一个个元数据。 提供逻辑共享,以替代高阶组件。 组件中不再存在 this。 这是一种开发理念与组织理念的革新,Hooks 带有强烈的 3 个特点:primitive、decentralization、algebraic effects。

primitive。元数据化,从最底层构建,让数据结构更清晰。同时也是一种工程趋势,比如 Tailwind CSS 便是将 CSS 元数据化。 decentralization。去中心化,class 时代普遍是一种 "顶层下发" 的理念,但 Hooks 带来强烈的 "组件自治" 的理念(比如 Provider 不再必须,组件请求自行处理)。同时,在其他领域,去中心化也是一个大的流行概念。 algebraic effects。代数效应,归根结底,Hooks 可以理解为一根管道,直通 React 核心能力,将内部机器暴露给了开发者。 6. Hooks 时代的状态管理 Hooks 出现之后,社区还没有一个像 Redux 一样曾经一统江湖的状态管理器。

Redux 添加了一些 useSelector、useDispatch、useStore 之类的能力,而 Facebook 自己也开源了 Recoil 这样的库。

但 Redux 终究老气沉沉,且早期给人留下的阴影太大,很多人的思维被格式化,随便一写就是云里雾里,只为实现一个简单功能,

而 Recoil 的写法则看起来有些别扭、有些啰嗦,发展也不温不火。

// Recoil atom({ key: 'textState', default: '' }); useRecoilState(textState); 而在 Hooks 时代,一个神秘组织异军突起,一口气贡献了 3 个状态管理库。

它就是 pmndrs,pmndrs for Poimandres。pmnd.rs

说是 "组织",其实主要开发者应该是一个人,就是这位大师,Daishi Kato。github.com/dai-shi

这三个库分别是 zustand、jotai、valtio。有趣的是,这三个词其实都是 "状态" 的意思。

zustand 德语 "状态",jotai 日语 "状态"、valtio 芬兰语 "状态"。

简单看一下用法:

// zustand - Redux 理念,旧时代精神,中心化逻辑 const useStore = create((set) => ({ bears: 0, removeBears: () => set({ bears: 0 }), })); const bears = useStore((state) => state.bears);

// jotai - primitive 理念,用法略啰嗦,但符合 Hooks 精神 const countAtom = atom(0); const [count, setCount] = useAtom(countAtom);

// valtio - proxy 理念,"不太 React",但用起来简单 const state = proxy({ count: 0, text: 'hello' }); const snap = useSnapshot(state);