React状态和mobx - 反模式？

Question

问题：它是一个反模式，既有mobx和反应，然后利用两个反应组件状态，并从mobx的@observer@observable？

由于我能理解，mobx试图取代反应状态，或者至少做了非常相似的事情。

Answer 1

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

• 为了同一目的混合组件的内部状态和全局状态并不好。你最终会遇到冲突的状态，你失去了可预测性，并且很难维持。

• 我相信任何可以称为business logic的东西都应该进入全局状态。

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

• 让你的孩子成分为@observer。为什么？读取它here（用@observer替换@connect）
• MobX派生是memoized自定义getter/selector函数的很好替代品。

Answer 2

我不会称之为反模式，但它打败了我最喜欢的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> 
     ); 
    } 
}