MobX 学习 - 04 TodoList 案例-白红宇

MobX 学习 - 04 TodoList 案例

阅读量：389 次

发布时间：2019-03-05

本文共 2966 字，大约阅读时间需要 9 分钟。

在优化后的代码中，我们通过使用 React 的上下文来共享 MobX Store 对象，避免了一层层传递的复杂性。以下是优化后的代码和步骤：

优化后的代码

1. TodoListStore.js

import { makeObservable, observable, action } from "mobx";import TodoViewStore from "./TodoViewStore";class TodoListStore {  todos = [];    constructor(todos) {    if (todos) this.todos = todos;    makeObservable(this, {      todos: observable,      createTodo: action    });  }  createTodo(title) {    this.todos.push(new TodoViewStore(title));  }}export default TodoListStore;

2. TodoListStoreProvider.js

import { createContext, useContext } from 'react';import TodoListStore from './TodoListStore';const TodoListStoreContext = createContext();const TodoListStoreProvider = ({ store, children }) => {  return (    
   
          {children}    
     );};export { TodoListStore, TodoListStoreProvider, useTodoListStore };const useTodoListStore = () => {  return useContext(TodoListStoreContext);};

3. App.js

import React from 'react';import ReactDOM from 'react-dom';import App from './App';import './index.css';import { TodoListStoreProvider } from './stores/TodoStore/TodoListStore';ReactDOM.render(  
       
      
   ,  document.getElementById('root'));

4. TodoListView.js

import TodoHeader from "./TodoHeader";import TodoFooter from "./TodoFooter";import TodoView from "./TodoView";import { observer } from 'mobx-react-lite';import { useTodoListStore } from '../../stores/TodoStore/TodoListStore';function TodoListView() {  const todoListStore = useTodoListStore();  return (    
         
          
            
             
     
                {todoListStore.todos.map(todo => (            
                ))}        
     
      
    
      
        
   
  );}export default observer(TodoListView);

5. TodoHeader.js

import { useState } from 'react';import { useTodoListStore } from '../../stores/TodoStore/TodoListStore';function TodoHeader() {  const [title, setTitle] = useState('');  const todoListStore = useTodoListStore();  return (    
         
    todos
      
     setTitle(event.target.value)}        onKeyUp={(event) => {          if (event.key === 'Enter') {            todoListStore.createTodo(event.target.value);            setTitle('');          }        }}      />    
   
  );}export default TodoHeader;

优化步骤

创建上下文共享数据

在 TodoListStore.js 中，导入 React 的上下文工具，并创建一个上下文对象 TodoListStoreContext。

使用 TodoListStoreProvider 组件，将 TodoListStore 上下文包裹起来，供下级组件访问。

提供一个 useTodoListStore 钩子函数，帮助组件快速访问上下文中的 TodoListStore 实例。

在 App.js 中使用上下文

在主应用组件 App.js 中，使用 TodoListStoreProvider 将 TodoListStore 上下文共享给所有子组件。

移除直接传递 todoListStore 的属性，改用上下文获取。

优化 TodoListView 组件

移除不必要的属性传递，直接使用 useTodoListStore 获取上下文中的 TodoListStore 实例。

进一步简化组件结构，提升可读性和维护性。

优化 TodoHeader 组件

移除直接使用 createTodo 方法的属性传递，改用 useTodoListStore 获取 TodoListStore 实例。

在输入事件中调用 createTodo 方法，确保新增待办事项的功能正常。

优化效果

简化组件结构：减少了不必要的属性传递，组件间的耦合度降低。

提高可维护性：通过上下文共享数据，避免了状态传递的复杂性，易于管理和扩展。

提升性能：减少了跨层次的状态传递，提高了组件间的响应速度和效率。

这种方法通过 React 的上下文机制，将 MobX 的状态管理逻辑封装在 Store 中，组件间只关注数据展示和业务逻辑，实现了 clean architecture 的理念，提升了应用的可维护性和复杂度。

转载地址：http://ktbzz.baihongyu.com/

你可能感兴趣的文章