Reactjs系列五状态管理mobx(上)

前言

在reactjs中,父子组件,同级组件间的状态传递只能通过props传递,如果需要传递的变量过多,就会导致项目混乱难以维护,并且容易产生意想不到的bug。所以我们需要一个能管理全局状态的工具,如redux,mobx这类的就是为了解决这个问题。

mobx基本概念

  • 使得状态管理变得简单可扩展。
  • 状态:是驱动应用的数据。
  • 衍生:源自状态并且不会再有任何进一步的相互作用的东西就是衍生。
  • 动作:是任一一段可以改变状态的代码。

mobx/mobx-react详解

主要api

  • observable:mobx属性设置可观察状态
  • action:mobx属性定义状态何时更新
  • compute:mobx属性监听自动更i新的值
  • provider:mobx-react的属性用来与mobx连接
  • observer:mobx-react的属性将react组件转变为响应式
  • inject:mobx-react的属性将mobx定义的实例注入到react组件

基本配置

1.安装mobx

//在react中使用mobx需要安装react-mobx
npm install mobx --save
npm install react-mobx --save

2 直接在react组件中定义

import React from "react";
import ReactDOM from "react-dom";
import { observable, action } from "mobx";
import { observer } from "mobx-react";
// 创建状态值
let appState = observable({ timer: 0 });
// action 来控制状态值
setInterval(
    action(() => {
        appState.timer += 1;
    }),2000);
appState.resetTimer = action(() => {
    appState.timer = 0;
});
// 让组件称为响应式组件
let TimeView = observer(({ appState }) => {
    return (
        <div className="App">
            <h1>Time:
: {appState.timer}</h1>
            <button onClick={appState.resetTimer}>reset timer</button>
        </div>
    );
});
//让组件称为响应式组件
let TimeView2 = observer(({ appState }) => {
    return (
        <div className="App">
            <h1>Time: {appState.timer}</h1>
        </div>
    );
});
//对比不是响应式组件 只会有初期值
let TimeView3 = ({ appState }) => {
    return (
        <div className="App">
            <h1>Time: {appState.timer}</h1>
        </div>
    );
};
let App =()=>{
    return (
    <div>
      <TimeView appState={appState} />
      <TimeView appState={appState} />
      <TimeView3 />
    </div>
    )
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

装饰器配置

1 设置项目允许装饰器

  • 安装react-app-rewired
npm i react-app-rewired --save
  • 创建config-overrides.js
module.exports = override()
  • 安装插件customize-cra
npm i customize-cra
  • 配置允许使用装饰器
const {addDecoratorsLegacy()} = require("customize-cra")
module.exports = override(addDecoratorsLegacy())

2 创建store实例

  • 在src目录下新建store目录
  • 在store目录新建index.js文件
  • 如果项目很小直接在index.js处理store,否则可以分多个文件定义
import {observable,action,computed} from 'mobx';
class AppStore{
    @observable list=[]
    @action
    setList(array){
        this.list=array
    }
}
export default new AppStore();

连接react

  • provide与indject配合使用
  • 在根组件中使用provide
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import Store from "./store";
import {Provider} from "mobx-react"
ReactDom.render(
<Provider {...Store}>
    ****
</Provider>
)

转换组件为响应式

  • 新建组件引入
import React, { Component } from 'react';
import Store from "./store";
import {observer,inject} from "mobx-react"
@inject("AppStore")
@observer
class Test  extends Component {
  render() {
    return (
      <div>
      </div>
    );
  }
}
export default Test;

使用store中定义的状态

//注入后store中存储的值会挂载到当前组件的props上
this.props.AppStore....

总结

在react的项目中redux是官方推荐使用的状态管理,但是在中小型项目中使用redux,我觉的太过笨重了,于是就采用了mobx这个状态管理库,mobx的简单,易用,可扩展性让react的状态设计变得如此简单方便。另外如果你想要快速掌握mobx,只需要牢记他的核心:任何源自应用状态的东西都应该自动地获得。

注:本文参考mobx官方文档

https://juejin.im/post/5dbda13c51882523667a3993

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
JAVA
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论