Redux和Mobx详解

最新推荐文章于 2024-08-22 19:44:38 发布

暖阳浅笑-嘿

最新推荐文章于 2024-08-22 19:44:38 发布

阅读量388

点赞数 8

文章标签：前端 redux

本文链接：https://blog.csdn.net/weixin_41978174/article/details/141142038

版权

Redux

Redux 是一个用于 JavaScript 应用的可预测状态容器。

核心概念：

单一数据源：整个应用的状态被存储在一个单一的 store 对象中。
纯函数进行状态修改：通过 reducers 来处理状态的更新，reducers 必须是纯函数，即给定相同的输入，总是返回相同的输出，并且没有副作用。
Action：描述状态变化的意图，是一个普通的 JavaScript 对象，包含 type 和可选的 payload 属性。

工作流程：

组件派发（dispatch）一个 Action。
store 将 Action 传递给相应的 reducer。
reducer 根据 Action 的 type 和当前的状态计算并返回新的状态。
store 保存新的状态，并通知所有订阅（subscribe）了状态变化的组件进行更新。

优点：

可预测性：由于状态的修改是通过严格的规则和纯函数进行的，使得状态的变化易于理解和跟踪。
时间旅行调试：可以记录状态的变化历史，方便进行调试和回滚。
适合大型复杂应用：能够有效地管理大量的状态和复杂的状态更新逻辑。

缺点：

样板代码较多：需要创建 actions、reducers 等，增加了一些代码量。
学习曲线较陡峭：对于初学者来说，理解其概念和工作流程可能需要一些时间。

示例代码：

// 定义 reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// 创建 store
import { createStore } from'redux';
const store = createStore(counterReducer);

// 派发 action
store.dispatch({ type: 'INCREMENT' });

// 订阅状态变化
store.subscribe(() => {
  console.log(store.getState());
});

MobX

MobX 是一个用于状态管理的库，强调响应式编程的理念。

核心概念：

Observable 状态：使用 observable 函数将数据标记为可观察的，当这些数据发生变化时，相关的依赖会自动更新。
Actions：用于修改可观察状态的方法。
Computed 值：根据可观察状态计算得出的值，会自动根据依赖的状态变化而更新。

工作流程：

创建可观察的状态。
在组件中使用 observer 函数包裹组件，使其成为响应式组件。
当可观察状态通过 actions 被修改时，依赖于这些状态的计算值和响应式组件会自动更新。

优点：

简洁直观：代码相对简洁，概念更容易理解。
无需手动管理订阅：自动处理状态变化和组件的更新。

缺点：

对于大型团队和复杂项目，可能缺乏严格的结构和约束。

示例代码：

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

class CounterStore {
  @observable count = 0;

  @action
  increment() {
    this.count++;
  }

  @action
  decrement() {
    this.count--;
  }

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

const store = new CounterStore();

@observer
class CounterComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Count: {store.count}</p>
        <p>Double Count: {store.doubleCount}</p>
        <button onClick={store.increment}>Increment</button>
        <button onClick={store.decrement}>Decrement</button>
      </div>
    );
  }
}