面试题：React中Hooks生态系统常用的状态管理插件有哪些及简单原理

Question

请列举至少两个React Hooks生态系统中常用的状态管理插件，并简要说明它们是如何实现状态管理的，例如Redux - Toolkit、MobX等。

Answer 1

• Redux - Toolkit：
  • 实现方式：它简化了Redux的开发流程。提供了createSlice函数，自动生成reducer和action creators。例如，定义一个slice：

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value++;
    },
    decrement: (state) => {
      state.value--;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

• 基于immer库，使开发者可以直接修改state，而不是像传统Redux那样返回新的state。同时，configureStore函数用于快速配置Redux store，集成了redux - thunk等中间件，方便处理异步操作。

• MobX：

  • 实现方式：采用响应式编程模型。定义observable状态，当状态变化时，依赖该状态的computed值和reactions会自动更新。例如：

import { makeObservable, observable, action, computed } from'mobx';

class Store {
  constructor() {
    this.count = 0;
    makeObservable(this, {
      count: observable,
      increment: action,
      doubleCount: computed
    });
  }

  increment() {
    this.count++;
  }

  get doubleCount() {
    return this.count * 2;
  }
}

const store = new Store();

• 在React中使用mobx - react库，通过observer函数包裹组件，使组件响应mobx状态的变化。例如：

import React from'react';
import { observer } from'mobx - react';

const Counter = observer(() => {
  return (
    <div>
      <p>Count: {store.count}</p>
      <p>Double Count: {store.doubleCount}</p>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
});

export default Counter;

• Recoil：
  • 实现方式：通过定义atom来表示状态。atom是一个可共享的状态单元，例如：

import { atom } from'recoil';

export const countAtom = atom({
  key: 'countAtom',
  default: 0
});

• 组件可以通过useRecoilState或useRecoilValue钩子来读取和更新atom状态。例如：

import React from'react';
import { useRecoilState } from'recoil';
import { countAtom } from './atoms';

const Counter = () => {
  const [count, setCount] = useRecoilState(countAtom);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

• 还支持selector，用于派生状态，类似于Redux的selector或MobX的computed值。