React状态和Mobx - 反模式？

Question

问题: 同时使用mobx和react，然后利用react组件状态以及mobx的@observer @observable是否是反模式？

据我所知，mobx试图替换react状态，或者至少执行非常相似的操作。

- TheDuDe

---

问题是为什么要这样做？在我的一个项目中，我使用 MobX 管理了大部分应用程序的状态，但我有一个需要成为有状态组件的模态对话框组件，所以我使用 setState() 管理了该特定组件的状态，因为在那里使用 MobX 似乎是不必要的（但我也可以使用）。 - Dor Weid

Answer 1

我不认为这是反模式，但它破坏了 MobX 最受欢迎的一个方面。当使用 MobX 时，您只需处理 props。我喜欢这样，因为我永远不必担心某个属性是属于 props 还是 state。自从我开始使用 MobX 以来，我从来没有一次需要在组件中本地使用 "state" 的情况。我发现最好将所有应用程序状态存储在 stores 中，并将该状态作为 props 传递给顶级组件...

然而，如果您需要使用 MobX 创建一个 "有状态" 组件，可以像这样进行操作。

import React, { Component } from 'react';
import { action, observable }  from 'mobx';
import { observer } from 'mobx-react';

@observer
export default class User extends Component {
    @observable user = {
        firstName: 'john',
        lastName: 'lennon',
        status: 'alive'
    };

    @action updateUserStatus(newStatus) {
        this.user.status = newStatus
    }

    render() {
        const { firstName, lastName, status } = this;

        return (
            <p>{firstName} {lastName} - {status}</p>
        );
    }
}

- Bryan Nicolas Brophy

Answer 2

在广义上，使用React组件的内部状态和MobX store并不是一种反模式。但需要考虑以下几点：

• 混合使用组件的内部状态和全局状态来实现相同的目的并不好。这样会导致状态冲突，失去可预测性，并且难以维护。

• 我认为任何可以称之为业务逻辑的东西都应该放在全局状态中。

• 可以隔离到单个组件的状态可以存在于组件本身中，只要它不是业务逻辑的一部分，我们的组件应该只是观察它们。

• 将子组件设置为@observer。为什么？请阅读此处（将@connect替换为@observer）
• MobX派生是记忆化自定义getter/selector函数的很好替代品。

- yadhu