React状态管理怎么选?

React 状态管理工具:我是这样选择的-阿里云开发者社区

知乎 - 有问题,就会有答案

2023 再看 React 状态管理库 - 掘金

序章、适用场景

  1. 在复杂度很低的场景下,我们完全可以用 Context 和 useReducer 来实现简单的状态管理,但它需要配合 memo 或者 PureComponent 来控制更新粒度。

  2. 在复杂度一般的场景下,可以尝试用 Recoil/jotai、hox 来管理分散的状态,提高重渲染的性能。

  3. 在复杂度比较高的场景下,可以考虑用 Mobx/valtio 来管理状态,不管在性能还是社区生态方面都非常出色。

  4. 在复杂度很高的场景下,使用 Redux/zustand 提高状态的可预测性,约束性的写法也方便后期的维护。

补充一下,业务组件如果要抽象到业务组件库,同样也应该将共享的状态,通过props形式传递到业务组件状态中。

一、zustand

(1)基本使用和优缺点

基本使用:Zustand Documentation

特点:

store 存储在 React 外部。

优点:

  1. 支持中间件
  2. 支持细粒度性能优化
  3. 有不错的生态中间件支持

缺点:

  1. 官方缺少derived/computed 状态支持,社区有提供解决方案

(2)原理简单实现

手写一个 Zustand,只要 60 行 - 掘金

实现的核心函数:

  1. createStore(状态存储和订阅等)
  2. useStore(渲染更新机制)
  3. create(封装createStore和useStore逻辑,返回hook给用户使用)

create参数设计成一个函数,这个函数接收 set、get 等函作为参数,那就自然支持了中间件。

scss 复制代码
const createStore = (createState) => {
    let state;
    const listeners = new Set();
    ...
    state = createState(setState, getState, api)
    const api = { setState, getState, subscribe, destroy }
    
    return api
}

export const create = (createState) => {
    const api = createStore(createState)

    const useBoundStore = (selector) => useStore(api, selector)

    Object.assign(useBoundStore, api);

    return useBoundStore
}

function useStore(api, selector) {
    const [,forceRender ] = useState(0);
    useEffect(() => {
        api.subscribe((state, prevState) => {
            const newObj = selector(state);
            const oldobj = selector(prevState);

            if(newObj !== oldobj) {
                forceRender(Math.random());
            }       
        })
    }, []);
    return selector(api.getState());
}



// 举例createState => createBearState

const createBearState = (set) => ({ 
  bears: 0, 
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),    
  removeAllBears: () => set({ bears: 0 }), 
  updateBears: (newBears) => set({ bears: newBears }),
})
const useBearStore = create(createBearState)

通过selector精确区分组件使用的是store的哪个属性,从而控制细粒度更新(不像context那样的粗粒度)

scss 复制代码
// 方式1. 使用useState订阅更新
function useStore(api, selector) {
  const [,forceRender ] = useState(0);
  useEffect(() => { 
    api.subscribe((state, prevState) => {  
      const newObj = selector(state);            
      const oldobj = selector(prevState);            
      if(newObj !== oldobj) {                
        forceRender(Math.random());            
       }               
      })    
    }, []);    
    
    return selector(api.getState());
}

// 方式2. 使用useSyncExternalStore订阅更新
function useStore(api, selector) {
    function getState() {
        return selector(api.getState());
    }
    
    return useSyncExternalStore(api.subscribe, getState)
}

二、Recoil和Jotai

tutorial.jotai.org/quick-start...

(一)基础用法

支持异步:

tutorial.jotai.org/quick-start...

(二)特点

jotai的语法相比于recoil(Facebook官方推出)更加简洁。

特点:jotai 是 Context 和订阅机制的结合,是面向 React 的一种全局状态管理库。

优点:

  1. 使用起来十分简单。
  2. 支持细粒度性能优化。如果你的需求是一个没有额外重复渲染的 Context,那 jotai 是个不错的选择。
  3. 支持derived/computed 状态。
  4. 生态系统较好。

缺点:

  1. 不支持中间件

Zustand 和 Jotai 之间有两个主要不同:

  • Zustand 是单一 store,Jotai 由原子 atom 组合而成;

  • Zustand 的 store 存储在 React 外部,Jotai 的 store 存储在 React 内部。

三、hox

简单易用,跟自定义hooks一模一样。

定位:只用于状态共享,而不是数据操作和状态管理。

优点:

  1. 支持细粒度性能优化 hox.js.org/zh/guide/pe...

  2. 较为简单。

缺点:

  1. 不支持derived/computed 状态

  2. 不支持中间件功能。

  3. 缺少生态支持

四、Redux和React-Redux

Redux 入门教程(一):基本用法 - 阮一峰的网络日志

五、Mobx和Valtio

响应式的,目前项目中不推荐使用。

其他参考资料:React useSyncExternalStore 一览 - 掘金

相关推荐
SoFlu软件机器人2 小时前
秒级构建消息驱动架构:描述事件流程,生成 Spring Cloud Stream+RabbitMQ 代码
分布式·架构·rabbitmq
之墨_3 小时前
【大语言模型入门】—— Transformer 如何工作:Transformer 架构的详细探索
语言模型·架构·transformer
Jacob02348 小时前
为什么现在越来越多项目选择混合开发?从 WebAssembly 在无服务器中的表现说起
架构·rust·webassembly
乌恩大侠8 小时前
USRP X440 和USRP X410 直接RF采样架构的优势
5g·fpga开发·架构·usrp·usrp x440·usrp x410
俞凡10 小时前
[大厂实践] Netflix 时间序列数据抽象层实践
架构
老纪的技术唠嗑局10 小时前
走出三大困境,深耕五大场景 | 好未来AI业务探索OceanBase实现降本86%
运维·数据库·架构
张人玉11 小时前
C#分层架构
开发语言·架构·c#
昵称为空C11 小时前
Jdk21优雅处理异步任务
java·后端·架构
tangzzzfan12 小时前
使用 Swinject 实现更好的面向协议编程
架构
zkmall14 小时前
ZKmall开源商城架构工具链:Docker、k8s 部署与管理技巧
docker·架构·开源