React状态管理怎么选？

序章、适用场景

在复杂度很低的场景下，我们完全可以用 Context 和 useReducer 来实现简单的状态管理，但它需要配合 memo 或者 PureComponent 来控制更新粒度。
在复杂度一般的场景下，可以尝试用 Recoil/jotai、hox 来管理分散的状态，提高重渲染的性能。
在复杂度比较高的场景下，可以考虑用 Mobx/valtio 来管理状态，不管在性能还是社区生态方面都非常出色。
在复杂度很高的场景下，使用 Redux/zustand 提高状态的可预测性，约束性的写法也方便后期的维护。

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

一、zustand

（1）基本使用和优缺点

基本使用：Zustand Documentation

特点：

store 存储在 React 外部。

优点：

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

缺点：

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

（2）原理简单实现

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

实现的核心函数：

createStore（状态存储和订阅等）
useStore（渲染更新机制）
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)
}