学习 React 看到了这个帖子 https://zhuanlan.zhihu.com/p/114292057
大概说的内容是用 mobx 创建了一个 TodoStore 实现了全局的状态管理。 问题在这里,既然用了 mobx 为何还要用 Provider?不是很明白。通过 observer 不是已经可以监听 store 的变化了吗?
下面是代码贴的是上面帖子里面的
// ./src/app.tsx
import React from 'react';
import { Provider } from 'mobx-react';
import Routers from './containers/routers';
import { stores, StoresContext } from './stores';
function App() {
return (
// 服务类组件
<Provider {...stores}>
{/* 服务函数组件 */}
<StoresContext.Provider value={stores}>
<Routers />
</StoresContext.Provider>
</Provider>
);
}
export default App;
// ./src/containers/todo-list-fn/index.tsx
import React from 'react';
import { observer } from 'mobx-react';
import { useTodoStore } from '../../stores';
function TodoListFnPage() {
const {
todos,
undoneCount,
doneCount,
addNewTodo,
removeById,
toggleStatusById
} = useTodoStore();
// 注意这里的 observer
export default observer(TodoListFnPage);
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.