reactjs - 反应状态和 mobx - 反模式？

Question

问题：同时拥有 mobx 和 react，然后同时使用 reacts 组件状态和@observer @observablefrom mobx 是否是一种反模式？

因为据我所知，mobx 试图替换反应状态，或者至少做了一些非常相似的事情。

Answer 1

我不会称其为反模式，但它打败了我最喜欢的 MobX 方面之一。使用 MobX 时，您只需要处理道具。我喜欢这样，因为我永远不必担心财产是否存在于道具或状态中。自从我开始使用 MobX 以来，我从来没有遇到过需要组件本地“状态”的情况。我发现最好将所有应用程序状态保留在商店中，将该状态作为道具传递给顶级组件......

但是，如果您需要使用 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>
        );
    }
}

Answer 2

将 React 组件的内部状态和 MobX 存储一起使用并不是广义上的反模式。但请考虑以下几点：

• 为同一目的混合组件的内部状态和全局状态是不好的。您最终会出现冲突状态，失去可预测性并且变得难以维护。

• 我相信任何可以称为业务逻辑的东西都应该进入全局状态。

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

• 使您的子组件成为@observer. 为什么？在此处阅读（替换@connect为@observer）
• MobX 派生是记忆化自定义 getter/selector 函数的绝佳替代品。