React项目中使用Mobx状态管理(一)
发布时间:2020-12-15 20:37:17 所属栏目:百科 来源:网络整理
导读:1、安装 1 $ yarn add mobx mobx-react ? 2、新建store/index.js,存放数据(以下思路仅限于父子组件的简单应用) 注意:这里暂时没使用装饰器@observable,装饰器和全局数据见下一节 1 import { observable,action } from ‘mobx‘ 2 // 观察器(状态) 3 const
1、安装 1 $ yarn add mobx mobx-react
? 2、新建store/index.js,存放数据(以下思路仅限于父子组件的简单应用) 注意:这里暂时没使用装饰器@observable,装饰器和全局数据见下一节 1 import { observable,action } from ‘mobx‘ 2 ? 3、回到根组件(父组件)App,引入appState并传入属性 1 import React from ‘react‘; 2 import appState from ‘./store‘; // 添加 3 import TodoList from "./components/TodoList"; 4 5 export default class App extends React.Component { 6 render() { 7 return ( 8 <div className=‘app‘> 9 <Child appState={appState}/> // 添加 10 </div> 11 ) 12 } 13 } ? 4、切换到子组件 1 import React,{Component} from ‘react‘; 2 import { observer } from ‘mobx-react‘; 3 4 class Child extends Component { 5 6 constructor(props) { 7 super(props); 8 } 9 // 该绑定方式属于ES7,需要安装babel-preset-stage-2,并添加到.babelrc中 10 _resetTimer = ()=> { 11 this.props.appState.resetTimer() // 对应appState中action的resetTimer方法 12 } 13 _increase = () => { 14 this.props.appState.increase() // 对应appState中action的increase方法 15 } 16 render() { 17 return ( 18 <div> 19 <h2>Child Component</h2> 20 <p>{this.props.appState.timer}</p> 21 <button onClick={this._resetTimer}>复位</button> 22 <button onClick={this._increase}>增加</button> 23 </div> 24 ); 25 } 26 } 27 28 export default observer(Child); // 非装饰器的普通方式,将组件传入observer观察器中,否则store接受不到组件的事件 ? 以上是Mobx最简单的使用方法,官方推荐使用装饰器模式。Mobx就类似Vuex,?需要state和action即可完成一个简单的状态管理 大概思路: 1 .?在store中声明状态(state)和方法(action)?分别使用Mobx的observer和action封装 2.?在父组件中导入state并属性传给子组件 3 .子组件通过props接收state,?在自定义的方法中调用store的方法,使store内的方法去改变state的值 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |