React+Mobx基本使用、模块化操作_React_

# 创建项目 $ npm create-react-app react_mobx_app # 安装mobx npm install mobx --save # 中间件工具 mobx-react-lite $ npm install mobx-react-lite # 官网推荐：mobx与react绑定库 $ npm install mobx-react --save

// 编写第一个mobx store小案例 import { makeAutoObservable } from 'mobx' class CounterStore { // 1.定义数据 count = 0 constructor() { // 2.把数据弄成响应式 makeAutoObservable(this) } // 3.定义action函数，用来修改数据 addCount = () => { this.count++; } } // 4.实例化导出给react使用 const counterStore = new CounterStore() export { counterStore } 

import { counterStore } from '../store/counter' import { observer } from 'mobx-react-lite' function Count() { return ( 
 {/* 1.把store中的count渲染出来 */} {counterStore.count}
 {/* 2.通过点击事件触发action函数，修改count值 */} 点我+1
 ) } // 包裹组件让视图响应数据变化 export default observer(Count)

// counterStore.js import { makeAutoObservable, computed } from 'mobx' class CounterStore { // 1.声明一个list数组 list = [1, 2, 3, 4, 5, 6] constructor() { makeAutoObservable(this, { // 3.标记计算属性 // 不标记不影响计算属性的使用，这里的标记只是为了让代码更直观，程序员一看到这行代码就知道filterList是通过计算属性得来的 filterList: computed }) } // 2.定义计算属性 get filterList() { return this.list.filter(item => item > 2) } changeList = () => { this.list.push(7, 8, 9) } } const counterStore = new CounterStore() export { counterStore } 

// Count.jsx import { counterStore } from '../store/counter' import { observer } from 'mobx-react-lite' function Count() { return ( 
 {/* 使用计算属性 */} {counterStore.filterList.join('-')} 修改List
 ) } // 包裹组件让视图响应数据变化 export default observer(Count) 

src ├─App.jsx ├─index.js ├─store | ├─count.Store.js | ├─index.js | └list.Store.js ├─components | ├─Count.jsx | └List.jsx 

import { makeAutoObservable } from 'mobx' class CountStore { count = 0 constructor() { makeAutoObservable(this) } addCount = () => { this.count++ } } export { CountStore } 

import { makeAutoObservable } from "mobx"; class ListStore { constructor() { makeAutoObservable(this) } list = ['react', 'vue'] changeList = () => { this.list.push('angular') } } export { ListStore } 

// 组合子模块 封装统一导出的供组件使用的方法 import React, { useContext } from "react"; import { CountStore } from "./count.Store"; import { ListStore } from "./list.Store"; class RootStore { constructor() { // 对子模块进行实例化操作 // 将来实例化rootstore的时候，rootstore实例上有两个属性，分别存放了子模块的两个实例。 this.countStore = new CountStore() this.listStore = new ListStore() } } // 使用react context机制，完成统一方法封装 // 1.实例化rootStore注入context const rootStore = new RootStore() const context = React.createContext(rootStore) // 2.导出useStore方法，供组件通过调用该方法使用根实例 // 作用：通过useContext拿到rootStore实例对象，然后返回 // 只要在业务组件中 调用useStore() 就可以拿到 rootStore实例对象 const useStore = () => useContext(context) export { useStore } 

import { observer } from 'mobx-react-lite' import { useStore } from './store' function App() { const { countStore } = useStore() return ( 
 countStore.addCount()}> {countStore.count} 
 ) } // 包裹组件让视图响应数据变化 export default observer(App)