Mobx的基本概念：
Observable（可观察对象）: 可观察对象是Mobx中的核心概念，它代表了你想要跟踪的状态。你可以使用observable函数来创建可观察对象。
Observer（观察者）: 观察者是响应状态变化的组件或函数。你可以使用observer高阶组件或autorun函数来创建观察者。
作用：就是会自动更新里面的数据，重新渲染。
Action（动作）: 动作是用于修改状态的函数。Mobx要求状态只能在动作内部修改，以确保状态变化被正确跟踪。
案例：
注意： viter + react + mobx ，记得vite.config.js 添加 解析装饰器的插件，在plugins
plugins: [react({
babel: {
plugins: [
["@babel/plugin-proposal-decorators", {
legacy: true }],
["@babel/plugin-proposal-class-properties", {
loose: true }],
],
}
})]
（1）假设我们要创建一个简单的任务列表应用，使用Mobx来管理任务的状态。
安装Mobx和React Mobx：
npm install mobx mobx-react
（2）创建一个Mobx存储（Store）来管理任务列表：
// taskStore.js
import { observable, action } from 'mobx';
class TaskStore {
@observable tasks = [];
@action addTask(task) {
this.tasks.push(task); // 这里刷新会将清除，
localStorage.setItem('eprList', JSON.stringify(this.eprList)); // 可以使用这个保存
}
@action removeTask(index) {
this.tasks.splice(index, 1);
}
}
const taskStore = new TaskStore();
export default taskStore;
（3）创建React组件并使用Mobx的观察者：
// TaskList.js
import React from 'react';
import { observer } from 'mobx-react';
import taskStore from './taskStore';
const TaskList = observer ( () => { // 这里observer
return (
<div>
<ul>
{taskStore.tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => taskStore.removeTask(index)}>删除</button>
</li>
))}
</ul>
<input
type="text"
placeholder="添加任务"
onKeyPress={(e) => {
if (e.key === 'Enter') {
taskStore.addTask(e.target.value);
e.target.value = '';
}
}}
/>
</div>
);
});
export default TaskList;
（4）渲染应用：
// App.js
import React from 'react';
import TaskList from './TaskList';
function App() {
return (
<div>
<h1>任务列表</h1>
<TaskList />
</div>
);
}
export default App;
（5）渲染整个应用：
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
（6）与redux比较的区别？
生态系统和工具支持：
MobX：MobX的生态系统相对较小，但也有一些常用的扩展和工具可用。它与React的集成非常好，并且有一些方便的React绑定库。
Redux：Redux拥有庞大的生态系统和丰富的工具支持。它有许多中间件和插件可用，可以与各种前端框架和库集成。
（7）在MobX中，异步操作？
解答：可以通过使用async/await或者Promise来实现。下面是一种常见的使用异步操作的方式
import { action, runInAction } from 'mobx';
class MyStore {
@action
async fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// 更新状态
runInAction(() => {
this.data = data;
});
} catch (error) {
console.error('Error fetching data:', error);
}
}
}
网友评论