本文共 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;

优化步骤

优化效果

• 简化组件结构：减少了不必要的属性传递，组件间的耦合度降低。
• 提高可维护性：通过上下文共享数据，避免了状态传递的复杂性，易于管理和扩展。
• 提升性能：减少了跨层次的状态传递，提高了组件间的响应速度和效率。

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