详解如何在React函数式组件中使用MobX

npm install mobx mobx-react

import { makeAutoObservable } from 'mobx';

class TodoStore {
  todos = [];

  constructor() {
    makeAutoObservable(this);
  }

  addTodo(todo) {
    this.todos.push(todo);
  }

  get todoCount() {
    return this.todos.length;
  }
}

export const todoStore = new TodoStore();

import { createContext } from 'react';
import { todoStore } from './TodoStore';

export const StoreContext = createContext(todoStore);

import React from 'react';
import ReactDOM from 'react-dom';
import { StoreContext } from './store';
import App from './App';
import { todoStore } from './TodoStore';

ReactDOM.render(
  <StoreContext.Provider value={todoStore}>
    <App />
  </StoreContext.Provider>,
  document.getElementById('root')
);

import React, { useState, useContext } from 'react';
import { observer } from 'mobx-react';
import { StoreContext } from './store';

const TodoList = observer(() => {
  const store = useContext(StoreContext);
  const [newTodo, setNewTodo] = useState('');

  const handleInputChange = (e) => {
    setNewTodo(e.target.value);
  };

  const handleFormSubmit = (e) => {
    e.preventDefault();
    store.addTodo(newTodo);
    setNewTodo('');
  };

  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        <input
          type="text"
          value={newTodo}
          onChange={handleInputChange}
        />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {store.todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <div>Total Todos: {store.todoCount}</div>
    </div>
  );
});

export default TodoList;