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

Question

我已经在 javascript 中使用 React 创建了一个 ToDo 列表，因为我是 React 的初学者，所以我已经使用 'this.state' 在多个组件中更改我的应用程序的状态，我的问题是在一次求职面试中，我接到了一项任务，即使用 mobx 创建待办事项列表以达到运行的状态，但是经过长时间的研究后，我在转换 React 项目的 'this.state.todo' 时仍然遇到很多问题]，这是代码中的主要应用程序组件，我希望演示如何将状态转换为 mobx observer/observable，如果需要更多组件，我希望添加它们

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 中做出反应鼓励可变状态。因此，不必执行所有额外的样板文件来防止您的状态发生突变，您只需通过更改您想要更改的内容来进行更改 "easy" 方式。

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

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

为了换取这种简单性，您需要确保一些事情：您要改变的对象需要 observable, and the components that render them need to be observers. (see the mobx documentation)

Also，记住 mobx 观察的是属性改变的时候，而不是 变量值 改变的时候。所以 mobx 可以观察到这个变化：foo.bar = "new value" 但不能观察到这个变化：let foo = 'initial value'; foo = 'new value'（注意第一个例子中的 .）。

因为这是一道测试题，我不会为您修复代码，但我会推荐您参考 mobx example todo app，希望这会有所帮助。

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

convert react app using this.state to mobx

javascript

reactjs

mobx

mobx-react

mobx-state-tree