React MobX 之始，创造非凡前端

前端

2023-10-19 02:13:20

探索React MobX 的力量

React 与 MobX 的结合是前端开发的强大组合，它们携手可构建出高效且易于维护的应用程序。本文将指导您开启 React MobX 之旅，了解其基本概念并提供详细的应用示例，让您轻松掌握 MobX 在 React 中的状态管理艺术。

从零准备 React 应用

在您踏上 React MobX 之旅之前，需要先搭建一个 React 应用。若您是 React 新手，可参考以下步骤：

安装Node.js 和npm。
创建一个新的React项目，例如使用npx create-react-app命令。
进入项目目录并安装MobX。
然后，您就可以开始在React中使用MobX了。

MobX React.FC 写法

MobX React.FC 写法是使用函数组件来管理状态，这种写法简单且易于理解。以下是一个示例：

import { observer } from "mobx-react-lite";

const MyComponent = observer(() => {
  const { count } = store;

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
});

在这个示例中，MyComponent是一个函数组件，它使用MobX的observer装饰器来观察store中的状态变化。当store中的状态发生变化时，observer会自动更新组件的UI。

Component 写法

MobX Component 写法是使用类组件来管理状态，这种写法提供了更多的灵活性，但相对也更复杂。以下是一个示例：

import { observable, action } from "mobx";
import { observer } from "mobx-react-lite";

class MyComponent extends React.Component {
  @observable count = 0;

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

  render() {
    return (
      <div>
        <h1>Count: {this.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default observer(MyComponent);