詳解react阻止無(wú)效重渲染的多種方式

2024-05-06 16:47:05

字體：大中小

供稿：網(wǎng)友

在開(kāi)發(fā)React組件的過(guò)程中，我們經(jīng)常會(huì)遇到這個(gè)問(wèn)題：什么情況下組件會(huì)重新渲染？

當(dāng)內(nèi)部data發(fā)生改變，state發(fā)生改變(通過(guò)調(diào)用this.setState()) 以及父組件傳過(guò)來(lái)的props發(fā)生改變時(shí)，會(huì)導(dǎo)致組件重新渲染。

以下幾個(gè)問(wèn)題同樣值得我們思考：

setState()函數(shù)在任何情況下都會(huì)導(dǎo)致組件重渲染嗎？如果setState中的state沒(méi)有發(fā)生改變呢？

如果state和從父組件傳過(guò)來(lái)的props都沒(méi)變化，那他就一定不會(huì)發(fā)生重渲染嗎？

首先，我們來(lái)解決這兩個(gè)問(wèn)題

沒(méi)有導(dǎo)致state的值發(fā)生變化的this.setState(）是否會(huì)導(dǎo)致重渲染 --- 會(huì)

import React from 'react'class Test extends React.Component{ constructor(props) {  super(props);  this.state = {   Number:1//設(shè)state中Number值為1  } } //這里調(diào)用了setState但是并沒(méi)有改變setState中的值 handleClick = () => {   const preNumber = this.state.Number   this.setState({    Number:this.state.Number   }) } render(){  //當(dāng)render函數(shù)被調(diào)用時(shí)，打印當(dāng)前的Number  console.log(this.state.Number)  return(<h1 onClick = {this.handleClick}>       {this.state.Number}      </h1>) }}

從控制臺(tái)的打印結(jié)果可以看出：共打印了15次1，但是組件并沒(méi)有發(fā)生任何變化?。。?/p>

這樣的結(jié)果不是我們想要的，如何阻止組件的重渲染呢？這時(shí)我們想到了React的一個(gè)生命周期鉤子 shouldComponentUpdate

react生命周期中有這樣一個(gè)鉤子，叫shouldComponentUpdate函數(shù)，是重渲染時(shí)render()函數(shù)調(diào)用前被調(diào)用的函數(shù)，

兩個(gè)參數(shù) nextProps和nextState ，分別表示下一個(gè)props和state的值。

當(dāng)函數(shù)返回false時(shí)，阻止接下來(lái)的render()函數(shù)的調(diào)用，阻止組件重渲染，返回true時(shí)，組件照常渲染

 //加入shouldComponentUpdate鉤子//在render函數(shù)調(diào)用前判斷：如果前后state中Number不變，通過(guò)return false阻止render調(diào)用 shouldComponentUpdate(nextProps,nextState){   if(nextState.Number == this.state.Number){    return false   } }

加入上述代碼后，打開(kāi)控制臺(tái)，點(diǎn)擊按鈕，還是白白的，說(shuō)明無(wú)效的重渲染被我們阻止了

第二個(gè)問(wèn)題，組件的state和從父組件傳遞過(guò)來(lái)的props都沒(méi)改變，組件還會(huì)重渲染嗎 --- 可能

同樣可以通過(guò)shouldComponentUpdate鉤子進(jìn)行阻止

所以說(shuō)，前后不改變state的值的setState和無(wú)數(shù)據(jù)交換的父組件的重渲染都會(huì)導(dǎo)致組件的重渲染，但我們可以通過(guò)shouldComponentUpdate來(lái)阻止這兩種情況

shouldComponentUpdate并不是完美的，只能阻止扁平的對(duì)象

nextState.Number == this.state.Number

如果調(diào)用層次比較深

nextState.NumberObject.number == this.state.NumberObject.number

Number 是一個(gè)數(shù)字變量

NumberObject是一個(gè)對(duì)象

數(shù)字變量(number類型)和對(duì)象(Object)類型的內(nèi)存存儲(chǔ)機(jī)制不同

這時(shí)候，因?yàn)閮烧叨贾赶蚨阎械耐粋€(gè)對(duì)象，所以一直都是true shouldComponentUpdate失效了

js變量分為基本類型的變量和引用類型的變量

對(duì)于number,string,boolean,undefined,null這些基本類型變量，值存在棧中

對(duì)于object,Array,function這些引用類型變量，引用存在棧中，而不同的引用卻可以指向堆內(nèi)存中的同一個(gè)對(duì)象

那么，問(wèn)題就來(lái)了

怎么樣才能取到不同的NumberObject呢？

四種方法：

1、ES6的擴(kuò)展語(yǔ)法Object.assign()

2、深拷貝/淺拷貝或利用JSON.parse(JSON.stringify(data))相當(dāng)于深拷貝，但使用受一定限制

3、引入immutable.js react官方推薦的第三方庫(kù)

4、繼承react的PureComponent組件（代替Component）

在js中，引用類型的數(shù)據(jù)，優(yōu)點(diǎn)在于頻繁的操作數(shù)據(jù)都是在原對(duì)象的基礎(chǔ)上修改，不會(huì)創(chuàng)建新對(duì)象，從而可以有效的利用內(nèi)存，不會(huì)浪費(fèi)內(nèi)存，這種特性稱為mutable（可變），但恰恰它的優(yōu)點(diǎn)也是它的缺點(diǎn)，太過(guò)于靈活多變?cè)趶?fù)雜數(shù)據(jù)的場(chǎng)景下也造成了它的不可控性，假設(shè)一個(gè)對(duì)象在多處用到，在某一處不小心修改了數(shù)據(jù)，其他地方很難預(yù)見(jiàn)到數(shù)據(jù)是如何改變的，針對(duì)這種問(wèn)題的解決方法，一般就像剛才的例子，會(huì)想復(fù)制一個(gè)新對(duì)象，再在新對(duì)象上做修改，這無(wú)疑會(huì)造成更多的性能問(wèn)題以及內(nèi)存浪費(fèi)。

為了解決這種問(wèn)題，出現(xiàn)了immutable對(duì)象，每次修改immutable對(duì)象都會(huì)創(chuàng)建一個(gè)新的不可變對(duì)象，而老的對(duì)象不會(huì)改變。

immutable.js主要有三大特性：

Persistent data structure （持久化數(shù)據(jù)結(jié)構(gòu)）

structural sharing （結(jié)構(gòu)共享）

support lazy operation （惰性操作）

Immutable Data 就是一旦創(chuàng)建，就不能再被更改的數(shù)據(jù)。對(duì) Immutable 對(duì)象的任何修改或添加刪除操作都會(huì)返回一個(gè)新的 Immutable 對(duì)象。Immutable 實(shí)現(xiàn)的原理是 Persistent Data Structure（持久化數(shù)據(jù)結(jié)構(gòu)），也就是使用舊數(shù)據(jù)創(chuàng)建新數(shù)據(jù)時(shí)，要保證舊數(shù)據(jù)同時(shí)可用且不變。同時(shí)為了避免 deepCopy 把所有節(jié)點(diǎn)都復(fù)制一遍帶來(lái)的性能損耗，Immutable 使用了 Structural Sharing（結(jié)構(gòu)共享），即如果對(duì)象樹(shù)中一個(gè)節(jié)點(diǎn)發(fā)生變化，只修改這個(gè)節(jié)點(diǎn)和受它影響的父節(jié)點(diǎn)，其它節(jié)點(diǎn)則進(jìn)行共享

三個(gè)最重要的數(shù)據(jù)結(jié)構(gòu)： Map List Set

Map：鍵值對(duì)集合，對(duì)應(yīng)于 Object，ES6 也有專門(mén)的 Map 對(duì)象

List：有序可重復(fù)的列表，對(duì)應(yīng)于 Array

Set：無(wú)序且不可重復(fù)的列表

//Map() 原生object轉(zhuǎn)Map對(duì)象 (只會(huì)轉(zhuǎn)換第一層，注意和fromJS區(qū)別)immutable.Map({name:'danny', age:18})//List() 原生array轉(zhuǎn)List對(duì)象 (只會(huì)轉(zhuǎn)換第一層，注意和fromJS區(qū)別)immutable.List([1,2,3,4,5])//fromJS()  原生js轉(zhuǎn)immutable對(duì)象 (深度轉(zhuǎn)換，會(huì)將內(nèi)部嵌套的對(duì)象和數(shù)組全部轉(zhuǎn)成immutable)immutable.fromJS([1,2,3,4,5])  //將原生array --> Listimmutable.fromJS({name:'danny', age:18})  //將原生object --> Map//toJS() immutable對(duì)象轉(zhuǎn)原生js (深度轉(zhuǎn)換，會(huì)將內(nèi)部嵌套的Map和List全部轉(zhuǎn)換成原生js)immutableData.toJS();//查看List或者map大小 immutableData.size 或者 immutableData.count()// is()  判斷兩個(gè)immutable對(duì)象是否相等immutable.is(imA, imB);//merge() 對(duì)象合并var imA = immutable.fromJS({a:1,b:2});var imA = immutable.fromJS({c:3});var imC = imA.merge(imB);console.log(imC.toJS()) //{a:1,b:2,c:3}

對(duì)于兩個(gè)一樣的數(shù)據(jù)，只有通過(guò)equals進(jìn)行比較才是相等的 == ===都不行

如果某個(gè)是另一個(gè)克隆出來(lái)的，那么全部都相等

push添加 unshift在頭部添加 concat組合返回的是新數(shù)據(jù)，而不是數(shù)據(jù)的長(zhǎng)度

//增刪改查（所有操作都會(huì)返回新的值，不會(huì)修改原來(lái)值）var immutableData = immutable.fromJS({  a:1,  b:2，  c:{    d:3  }});var data1 = immutableData.get('a') // data1 = 1 var data2 = immutableData.getIn(['c', 'd']) // data2 = 3  getIn用于深層結(jié)構(gòu)訪問(wèn)var data3 = immutableData.set('a' , 2);  // data3中的 a = 2var data4 = immutableData.setIn(['c', 'd'], 4);  //data4中的 d = 4var data5 = immutableData.update('a',function(x){return x+4}) //data5中的 a = 5var data6 = immutableData.updateIn(['c', 'd'],function(x){return x+4}) //data6中的 d = 7var data7 = immutableData.delete('a')  //data7中的 a 不存在var data8 = immutableData.deleteIn(['c', 'd'])  //data8中的 d 不存在復(fù)制代碼

優(yōu)點(diǎn)：

降低mutable帶來(lái)的復(fù)雜度
節(jié)省內(nèi)存
歷史追溯性（時(shí)間旅行）：時(shí)間旅行指的是，每時(shí)每刻的值都被保留了，想回退到哪一步只要簡(jiǎn)單的將數(shù)據(jù)取出就行，想一下如果現(xiàn)在頁(yè)面有個(gè)撤銷的操作，撤銷前的數(shù)據(jù)被保留了，只需要取出就行，這個(gè)特性在redux或者flux中特別有用
擁抱函數(shù)式編程：immutable本來(lái)就是函數(shù)式編程的概念，純函數(shù)式編程的特點(diǎn)就是，只要輸入一致，輸出必然一致，相比于面向?qū)ο螅@樣開(kāi)發(fā)組件和調(diào)試更方便

缺點(diǎn)：