反应状态和 mobx - 反模式？

Question

问题：同时拥有mobx和react，然后利用两个react组件状态，以及来自mobx的@observer @observable是否是反模式？

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

Answer 1

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

出于同一目的混合组件的内部状态和全局状态并不好。您最终会遇到相互冲突的状态，失去可预测性并且变得难以维护。
我相信任何可以称为 business logic 的东西都应该进入全局状态。
可以隔离到单个组件的状态可以驻留在组件本身内部，只要它不是业务逻辑的一部分，我们的组件应该只观察它们。
使您的子组件成为 @observer。为什么？阅读 here（将 @connect 替换为 @observer）
MobX 派生是记忆化自定义 getter/selector 函数的绝佳替代品。

Answer 2

我不会称它为反模式，但它破坏了我最喜欢的 MobX 方面之一。使用 MobX 时，你只会处理 props。我喜欢这样，因为我永远不必担心属性是存在于 props 还是 state 中。自从我开始使用 MobX 以来，我从来没有遇到过需要 "state" 本地组件的情况。我发现最好将所有应用程序状态保存在商店中，将该状态作为道具传递到顶级组件中...

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

反应状态和 mobx - 反模式？

React states and mobx - antipattern?

reactjs

design-patterns

mobx