当前位置：网站首页 > 热门文章 > 正文

React状态管理工具，十分钟就能上手的工具库推荐!

bigegpt 2024-12-28 11:19 6 浏览

记录、分享IT相关知识和见闻！
想要了解更多软件相关知识的朋友！
记得右上角添加【关注】，支持一下！

Hello，大家好哇！我是幽默君！

现在是一个讲求效率的时代，无论你是前端还是后端！

但凡是想把鱼摸好，效率工具绝对少不了！

上周分享了一篇文章：

使用 Vite 提高开发效率；

很多小伙伴私信我，使用了Vite 之后效率真的是非常高；

而且开发体验真的是被拉满到极致，简直太爽了！

这种感觉就像是当你骑着自行车，突然有人开着跑车从你身边擦肩而过，而你还在原地思考着能否追上跑车，却只见那跑车早已消失在眼前，留给你的只是满脑子的圈圈。

Vite 虽然用上了，但是有没有更好的状态管理工具呢？

答案是肯定的！肯定、必须、一定是有的。

这是好几位朋友问我的同一类问题！

带这这个问题，今天，给大家介绍一款非常轻量、非常简单、非常容易上手的状态管理工具。

它就是：react-mobx ！

这个工具简单到你10分钟就可以完全上手使用。

如果10分钟你还学不会！请出门右拐去找隔壁老王，问问他怎么回事。

废话不多说，开始整活。

mobx 简介

一款状态管理工具。

作用：用来管理你的应用程序的状态。类似 React-Redux、Context Api、Recoil 功能。

优点：轻量，比redux 好用。

为什么推荐mobx？

因为我喜欢用，而且文章是我写的。

Mobx 的核心概念

State （状态）：驱动应用存储的数据信息，在React中，类似 useState存储的内容。

Actions （动作）：改变State的动作，点击按钮后，在action里面改变你的state。

Derivations （派生物）：一个可观察的对象，比如你的React组件。

mobx 的核心概念其实非常简单，就是从 State驱动UI； UI 通过Action改变State 这么一个过程。

React-mobx 实操：

1、创建项目：

yarn create vite demo-ts --template react-ts

2、安装依赖：使用mobx只需要安装以下两个库

 yarn add mobx mobx-react

3、编写 store：

store 文件就是一个简单的class，里面需要与UI交互的状态使用observable、action等装饰器装饰一下。

编写store 时，需要在 constructor里调用 mobx 的makeAutoObservable方法。

import { 
    action, 
    makeAutoObservable, 
    observable, 
    runInAction 
} from "mobx";

class Store {
    constructor() {
        makeAutoObservable(this);
    }

    @observable public count = 0;

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

const store = new Store()
export default store;

注意：这里会遇到一个问题，Vite 不支持装饰器，需要安装两个库；

@babel/plugin-proposal-decorators
@babel/plugin-proposal-class-properties

然后再配置一下tsconfig.ts 配置文件：

增加 "experimentalDecorators": true,

4、注入Store 到组件：

4.1：在需要使用store的组件根节点注入store=>store provider：

import { Provider } from "mobx-react";
import { store } from "./store";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
      <Provider store={{ store }}>
        <Root />
      </Provider>
);

4.2: 在组件内包裹一下observer：

import { observer } from "mobx-react";
import { store } from "../../stores";

const Index = () => {
    return <div className="full-container">
      Hellow world. {store.count}
    </div>
};

export default observer(Index);

5、使用 store ，改变store 的状态：

import { observer } from "mobx-react";
import { store } from "../../stores";

const Index = () => {
    return <div className="full-container">
      Hellow world. {store.count}
  	   <button onClick={() => store.increment()}>
          add
        </button>
    </div>
};

export default observer(Index);

6、多个Store 使用方法：

import { Provider } from "mobx-react";
import { store } from "./store";
import { store1 } from "./store/S1";
import { store2 } from "./store/S2";
import { store3 } from "./store/S3";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
      <Provider store={{ store, store1, store2, store3 }}>
        <Root />
      </Provider>
);

跟着以上步骤，我相信新手100% 是可以自己搞定一个Mobx项目的！

如果觉得Mobx不够轻量，当然还有mobx-react-lite 供你使用，用法与 mobx 基本一样！

mobx 在 react 状态管理工具中非常的火爆，如果你也想让你的开发效率提速，记得一定要使用起来。

10分钟还没学会的朋友，请评论区留言，我们慢慢聊。

【往期精彩文章回顾】

01 推荐 12 个效率工具

02 推荐 24 个必须掌握的html属性

03 推荐必须掌握的 CSS 属性

04 推荐 19 个高效的 ES6 代码片段

05 推荐 16 个实用的 React 库

06 推荐超级强大的终端工具

? 以上就是今天为大家带来的分享！