使用 this.state 将 react 应用程序转换为 mobx

Question

我使用 react 在 javascript 中创建了一个 ToDo 列表，因为我是 react 的初学者，所以我使用 'this.state' 在多个组件中更改我的应用程序的状态，我的问题是在面试时我是给定一个使用 mobx 创建待办事项列表来运行其状态的任务，但是经过长时间的研究，我仍然有很多转换我的反应项目的“this.state.todo”的问题，这里是主要的应用程序组件在代码中，我希望演示如何将状态转换为 mobx 观察者/可观察者，如果需要更多组件，我希望添加它们

import React from 'react';
import _ from 'lodash';
import TodoCreate from './todo-create';
import TodoList from './todo-list';
import 'semantic-ui-css/semantic.min.css';
import { Header } from 'semantic-ui-react';
import {decorate, observable} from "mobx"
import {observer} from "mobx-react"
export default class App extends 
React.Component {

constructor(props) {
    super(props);

    this.state = {
       todos : todos
    }

    this.createTask = this.createTask.bind(this);
    this.saveTask = this.saveTask.bind(this);
    this.deleteTask = this.deleteTask.bind(this);
    this.toggleTask = this.toggleTask.bind(this);
}

createTask(task) {
    this.state.todos.push({
        task,
        isCompleted: false,
        creationDate:new Date().toLocaleTimeString() + new Date().toLocaleDateString(),
        updateDate:new Date().toLocaleTimeString() +  new Date().toLocaleDateString()
    });
    this.setState({ todos: this.state.todos });
}

deleteTask(taskToDelete) {
    _.remove(this.state.todos, todo => todo.task === taskToDelete);
    this.setState({ todos: this.state.todos });
}

saveTask(oldTask, newTask) {
    const foundTodo = _.find(this.state.todos, todo => todo.task === oldTask);
    foundTodo.task = newTask;
    foundTodo.updateDate = new Date().toLocaleTimeString() +  new Date().toLocaleDateString();
    this.setState({ todos: this.state.todos });
}

toggleTask(task) {
    const foundTodo = _.find(this.state.todos, todo => todo.task === task);
    foundTodo.isCompleted = !foundTodo.isCompleted;
    foundTodo.updateDate = new Date().toLocaleTimeString() + '' + new Date().toLocaleDateString();
    this.setState({ todos: this.state.todos });
}

render() {
    return (
        <div>
            <div className="wrap">
            <div className="header">
                <Header as="h2" className="headerclass">ls-tech Todo-list</Header></div>
                  <div className="wrap-list">

            <div className="td-list-con">

                <TodoCreate
                    todos={this.state.todos}
                    createTask={ this.createTask}
                    />

                <TodoList
                    todos={ this.state.todos }
                    saveTask={ this.saveTask }
                    deleteTask={ this.deleteTask }
                    toggleTask={ this.toggleTask }
                    />
               </div>
            </div>
        </div>
    </div>
    )
}
}

Answer 1

因此，mobx 不同于其他常见的状态管理系统，用于在 mobx 鼓励可变状态下做出反应。因此，您不必做所有额外的样板来防止您的状态被变异，您只需通过更改您想要更改的“简单”方式来进行更改。

例如，假设您有一组具有description 和isFinished 属性的待办事项对象。在 Mobx 中，您只需将待办事项和 todoItem.isFinished = true 设置为 true/checked。 Mobx 负责其余的工作，并通知相关组件进行更新。因此，在使用 mobx 时，您很少需要调用 this.setState。任何更改（对observable 对象）都会自动更新状态。

如果你不使用 Mobx，你需要确保你从未改变过一个值，而是返回一个新的对象副本，唯一的区别是你想要的改变。我相信这就是您使用 _ 对象上的方法的原因：它们可以帮助您在不改变值的情况下进行更改（尽管看起来您仍然会意外地改变事物）。

为了换取这种简单性，您需要确保以下几点：您正在变异的对象需要是observable，渲染它们的组件需要是observers。 （见mobx documentation）

Also，记住 mobx 会观察 properties 何时发生变化，而不是 变量值 何时发生变化。所以 mobx 可以观察到这种变化：foo.bar = "new value" 但不能观察到这种变化：let foo = 'initial value'; foo = 'new value'（请注意第一个示例中的 .）。

因为这是一道测试题，所以我不会为你修改代码，但我会将你转介给mobx example todo app，希望对你有所帮助。