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 一览 - 掘金

相关推荐
ai小鬼头10 小时前
AIStarter如何助力用户与创作者?Stable Diffusion一键管理教程!
后端·架构·github
掘金-我是哪吒12 小时前
分布式微服务系统架构第156集:JavaPlus技术文档平台日更-Java线程池使用指南
java·分布式·微服务·云原生·架构
国服第二切图仔12 小时前
文心开源大模型ERNIE-4.5-0.3B-Paddle私有化部署保姆级教程及技术架构探索
百度·架构·开源·文心大模型·paddle·gitcode
SelectDB13 小时前
SelectDB 在 AWS Graviton ARM 架构下相比 x86 实现 36% 性价比提升
大数据·架构·aws
weixin_4373982114 小时前
转Go学习笔记(2)进阶
服务器·笔记·后端·学习·架构·golang
liulilittle15 小时前
SNIProxy 轻量级匿名CDN代理架构与实现
开发语言·网络·c++·网关·架构·cdn·通信
喷火龙8号15 小时前
深入理解MSC架构:现代前后端分离项目的最佳实践
后端·架构
Codebee16 小时前
“自举开发“范式:OneCode如何用低代码重构自身工具链
java·人工智能·架构
掘金-我是哪吒16 小时前
分布式微服务系统架构第158集:JavaPlus技术文档平台日更-JVM基础知识
jvm·分布式·微服务·架构·系统架构
JohnYan16 小时前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构