優化 React 組件渲染 {🚀}

MobX 速度非常快，通常甚至比 Redux 更快，但以下是一些讓 React 和 MobX 發揮最大效能的技巧。大多數技巧適用於 React，並非 MobX 特定。請注意，雖然了解這些模式很好，但即使您完全不擔心它們，您的應用程式通常也足夠快。

僅在效能實際出現問題時才優先考慮它！

使用許多小型組件

observer 組件會追蹤它們使用的所有值，並在任何值發生變化時重新渲染。因此，您的組件越小，它們需要重新渲染的變化就越小。這意味著使用者介面的更多部分可以彼此獨立地渲染。

在專用組件中渲染列表

以上在渲染大型集合時尤其如此。 React 在渲染大型集合方面出了名的糟糕，因為協調器必須在每次集合更改時評估集合產生的組件。因此，建議使用僅映射集合並渲染它的組件，而不渲染其他任何內容。

不良

const MyComponent = observer(({ todos, user }) => (
    <div>
        {user.name}
        <ul>
            {todos.map(todo => (
                <TodoView todo={todo} key={todo.id} />
            ))}
        </ul>
    </div>
))

在上面的清單中，當 `user.name` 更改時，React 將不必要地需要協調所有 `TodoView` 組件。它們不會重新渲染，但協調過程本身很昂貴。

良好

const MyComponent = observer(({ todos, user }) => (
    <div>
        {user.name}
        <TodosView todos={todos} />
    </div>
))

const TodosView = observer(({ todos }) => (
    <ul>
        {todos.map(todo => (
            <TodoView todo={todo} key={todo.id} />
        ))}
    </ul>
))

不要使用陣列索引作為鍵

不要使用陣列索引或任何未來可能會更改的值作為鍵。如果需要，請為您的物件產生 ID。查看這篇部落格文章。

延遲解除參照值

使用 `mobx-react` 時，建議盡可能晚地解除參照值。這是因為 MobX 會自動重新渲染解除參照可觀察值的組件。如果這發生在組件樹的更深處，則需要重新渲染的組件更少。

較慢

<DisplayName name={person.name} />

較快

<DisplayName person={person} />

在較快的範例中，`name` 屬性的更改僅觸發 `DisplayName` 重新渲染，而在較慢的範例中，組件的所有者也必須重新渲染。這沒有錯，如果擁有組件的渲染速度足夠快（通常是這樣！），那麼這種方法效果很好。

函式屬性 {🚀}

您可能會注意到，要延遲解除參照值，您必須建立許多小型 observer 組件，每個組件都自定義為渲染不同的資料部分，例如

const PersonNameDisplayer = observer(({ person }) => <DisplayName name={person.name} />)

const CarNameDisplayer = observer(({ car }) => <DisplayName name={car.model} />)

const ManufacturerNameDisplayer = observer(({ car }) => 
    <DisplayName name={car.manufacturer.name} />
)

如果您有大量不同形狀的資料，這會很快變得乏味。另一種方法是使用一個函式來傳回您希望 `*Displayer` 渲染的資料

const GenericNameDisplayer = observer(({ getName }) => <DisplayName name={getName()} />)

然後，您可以像這樣使用組件

const MyComponent = ({ person, car }) => (
    <>
        <GenericNameDisplayer getName={() => person.name} />
        <GenericNameDisplayer getName={() => car.model} />
        <GenericNameDisplayer getName={() => car.manufacturer.name} />
    </>
)

這種方法允許在您的應用程式中重複使用 `GenericNameDisplayer` 來渲染任何名稱，並且您仍然可以將組件重新渲染次數降至最低。