文章首發個人部落格

前言

目的

本文只介紹函式式元件特有的效能優化方式，類元件和函式式元件都有的不介紹，比如 key 的使用。另外本文不詳細的介紹 API 的使用，後面也許會寫，其實想用好 hooks 還是蠻難的。

面向讀者

有過 React 函式式元件的實踐，並且對 hooks 有過實踐，對 useState、useCallback、useMemo API 至少看過文件，如果你有過對類元件的效能優化經歷，那麼這篇文章會讓你有種熟悉的感覺。

React 效能優化思路

我覺得React 效能優化的理念的主要方向就是這兩個：

1. 減少重新 render 的次數。因為在 React 裡最重(花時間最長)的一塊就是 reconction(簡單的可以理解為 diff)，如果不 render，就不會 reconction。

2. 減少計算的量。主要是減少重複計算，對於函式式元件來說，每次 render 都會重新從頭開始執行函式呼叫。

在使用類元件的時候，使用的 React 優化 API 主要是：shouldComponentUpdate和 PureComponent，這兩個 API 所提供的解決思路都是為了減少重新 render 的次數，主要是減少父元件更新而子元件也更新的情況，雖然也可以在 state 更新的時候阻止當前元件渲染，如果要這麼做的話，證明你這個屬性不適合作為 state，而應該作為靜態屬性或者放在 class 外面作為一個簡單的變數 。

但是在函式式元件裡面沒有宣告週期也沒有類，那如何來做效能優化呢？

React.memo

首先要介紹的就是 React.memo，這個 API 可以說是對標類元件裡面的 PureComponent，這是可以減少重新 render 的次數的。

可能產生效能問題的例子

舉個