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> 
     ); 
    } 
}