旅游营销网站开发,网页首页设计模板图片,电邮注册网站,微信公众平台小程序官网React 中使用 mobx
配置开发环境 安装mobx和中间件工具 mobx-react-lite 只能函数组件中使用 yarn add mobx mobx-react-lite初始化 mobx 定义数据状态 state在构造器中实现数据响应式处理 makeAutoObservble定义修改数据的函数 action实例化 store 并导出 import { compute…React 中使用 mobx
配置开发环境 安装mobx和中间件工具 mobx-react-lite 只能函数组件中使用 yarn add mobx mobx-react-lite初始化 mobx 定义数据状态 state在构造器中实现数据响应式处理 makeAutoObservble定义修改数据的函数 action实例化 store 并导出 import { computed, makeAutoObservable } from mobx;class CounterStore {list [1, 2, 3, 4, 5, 6];constructor() {makeAutoObservable(this, {filterList: computed,});}// 修改原数组changeList () {this.list.push(7, 8, 9);};// 定义计算属性get filterList() {return this.list.filter((item) item 4);}
}const counter new CounterStore();export default counter;使用 store 在组件中导入 counterStore 实例对象在组件中使用 storeStore 实例对象中的数据通过事件调用修改数据的方法修改 store 中的数据让组件响应数据变化 // 导入counterStore
import counterStore from ./store;
// 导入observer方法
import { observer } from mobx-react-lite;
function App() {return (div classNameApp{/* 原数组 */}{JSON.stringify(counterStore.list)}{/* 计算属性 */}{JSON.stringify(counterStore.filterList)}button onClick{() counterStore.changeList()}change list/button/div);
}
// 包裹组件让视图响应数据变化
export default observer(App);异步处理数据 在 mobx 中编写异步请求方法 获取数据 存入 state 中组件中通过 useEffect 空依赖 触发 action 函数的执行 // 异步的获取import { makeAutoObservable } from mobx;
import axios from axios;class ChannelStore {channelList [];constructor() {makeAutoObservable(this);}// 只要调用这个方法 就可以从后端拿到数据并且存入channelListsetChannelList async () {const res await axios.get(http://XXX);this.channelList res.data.channels;};
}
const channlStore new ChannelStore();
export default channlStore;import { useEffect } from react;
import { useStore } from ./store;
import { observer } from mobx-react-lite;
function App() {const { channlStore } useStore();// 1. 使用数据渲染组件// 2. 触发action函数发送异步请求useEffect(() {channlStore.setChannelList();}, []);return (ul{channlStore.channelList.map((item) (li key{item.id}{item.name}/li))}/ul);
}
// 让组件可以响应数据的变化[也就是数据一变组件重新渲染]
export default observer(App);模块化 拆分模块 js 文件每个模块中定义自己独立的 state/action在 store/index.js 中导入拆分之后的模块进行模块组合利用 React 的 context 的机制导出统一的 useStore 方法给业务组件使用 1. store/taskStore.js
import { makeAutoObservable } from mobx;class TaskStore {taskList [];constructor() {makeAutoObservable(this);}addTask() {this.taskList.push(vue, react);}
}const task new TaskStore();export default task;2. store/counterStore.js
import { makeAutoObservable } from mobx;class CounterStore {count 0;list [1, 2, 3, 4, 5, 6];constructor() {makeAutoObservable(this);}addCount () {this.count;};changeList () {this.list.push(7, 8, 9);};get filterList() {return this.list.filter((item) item 4);}
}const counter new CounterStore();export default counter;3. 整合导出统一方法 store/index.js
import React from react;import counter from ./counterStore;
import task from ./taskStore;class RootStore {constructor() {this.counterStore counter;this.taskStore task;}
}const rootStore new RootStore();// context机制的数据查找链 Provider如果找不到 就找createContext方法执行时传入的参数
const context React.createContext(rootStore);const useStore () React.useContext(context);export { useStore };4. 组件中使用
import { observer } from mobx-react-lite;
// 导入方法
import { useStore } from ./store;
function App() {// 得到storeconst store useStore();return (div classNameAppbutton onClick{() store.counterStore.addCount()}{store.counterStore.count}/button/div);
}
// 包裹组件让视图响应数据变化
export default observer(App);
