react 效能優化的方向可以分為以下兩方面
減少render的次數，在react最花時間的一塊reconction階段(diff)，如果不render，就不會reconction。
減少計算，主要是減少重複計算，對於函式元件而言，每次的render都會重新執行這個函式。
class component元件優化的api主要是shouldcomponentupdate和purecomponent，這兩個api的解決思路是減少重新render的次數，主要是減少父元件更新而子元件也更新的情況。
函式式元件沒有例項，如何做效能優化？
高階元件,但只適用於函式元件，而不適用 class 元件。react.memo 僅檢查 props 變更。
預設情況下其只會對複雜物件做淺層對比，如果想控制對比過程，需將自定義的比較函式通過第二個引數傳入來實現。
通過 react.memo 包裹的元件在 props 不變的情況下，這個被包裹的元件是不會重新渲染的，會直接復用最近一次渲染的結果。
function
mycomponent
(props)
function
areequal
(prevprops, nextprops)
export
default react.
memo
(mycomponent, areequal)
;
一般用來快取計算的值，可以減少計算的量。
usememo 的第乙個引數就是乙個函式，這個函式返回的值會被快取起來，同時這個值會作為 usememo 的返回值，第二個引數是乙個陣列依賴，如果陣列裡面的值有變化，那麼就會重新去執行第乙個引數裡面的函式，並將函式返回的值快取起來並作為 usememo 的返回值 .
React 4 函式式元件
函式式元件中，沒有 state 和 生命週期，所以又被稱為 無狀態元件 在react16.7 beta測試 版本中，函式元件一直當作純渲染元件來使用 1.元件的第0個引數,是props,接收父級傳遞過來的資訊 2.元件中的 return 必須寫 定義該元件要渲染的內容 3.沒有生命週期 只在類式元件...
react 中的無狀態函式式元件
無狀態函式式元件，顧名思義，無狀態，也就是你無法使用state，也無法使用元件的生命週期方法，這就決定了函式元件都是展示性元件，接收props，渲染dom，而不關注其他邏輯。其實無狀態函式式元件也是官方比較推薦的一種方式，盡量讓底層的元件變成無狀態函式式元件，也即元件盡量只用來顯示資料，把資料操作的...
React 元件更新優化
3.react.memo 4.usememo shouldcomponentupdate和react.purecomponent是類元件中的優化方式，而react.memo是函式元件中的優化方式。class componentdiffpure extends purecomponent change...