學習筆記 react中的效能優化

2021-10-10 06:28:40 字數 1379 閱讀 5507

對react專案進行效能優化,其最主要的就是要減少render次數,實現元件區域性更新。

react.memo()函式主要用來對「函式元件」中的props中的值進行比較,進而決定是否需要重新渲染元件。專用於函式元件,需要消耗效能。

使用情況:預期到渲染的函式元件比較大時,且會出現大量無意義的重新渲染時,才使用。

const uilist = react.memo(() => (

))

react.memo()函式也可以對函式元件中context中的值進行比較,進而決定是否需要重新渲染。 

let uilistheaderorderfn = react.memo(

(, changeorderdir, changeordercol }) => (

changeordercol("price")}>**

changeordercol("sale")}>銷量

changeordercol("rate")}>評價

),(prevdata, nextdata) => prevdata.ordercol === nextdata.ordercol &&

prevdata.orderdir === nextdata.orderdir

);const uilistheaderorder = () => (

);

purecomponent主要用於類元件,元件在建立時,繼承purecomponent。就會對該元件的render更新進行優化。

其本質是在類元件的shouldcomponentupdate中判斷props資料是否發生變化。如果無改變,就不更新,減少不必要的render,提高效能。

import react,  from 'react';

class child extends purecomponent {}

該函式主要用來進行render效能優化。

在函式中書寫適合的邏輯,並返回true或false。如果是true表示允許更新,false表示沒有必要更新。

這就可以減少不必要的更新操作。

shouldcomponentupdate(nextprops)

// 如果不寫預設返回true

以上就是一些效能優化的方法。不過一般用於大型專案。中小型專案沒有必要使用效能優化。效能優化就是要讓資料改變的元件區域性重新整理,不要連帶著無關的元件執行重新整理。

React中的效能優化點

1.在constructor中繫結事件函式的this指向 把乙個函式賦值給乙個變數,然後用那個變數去執行函式會造成this的丟失,所以需要繫結this,把繫結放在建構函式中可以保證只繫結一次函式,如果放在render函式中繫結this的話每次渲染都會去繫結一次this,那樣是很耗費效能的。2.使用箭...

React 效能優化

避免重複渲染 當乙個元件的props或者state改變時,react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時,react會更新dom。在一些情況下,你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度,它是在重新渲染過...

react 效能優化

在shouldcomponentupdate 方法中判斷props和state是否改變,若未改變則無需渲染。有些情況如父元件的props或state改變了,但是子元件其實未改變,若不判斷的話會導致子元件一起被渲染。shouldcomponentupdate nextprops nextstate r...