快捷導(dǎo)航

解決React中的re-render問題

更新時間：2022年01月25日 17:14:10 作者：Peter?譚

這篇文章主要介紹了解決React中的re-render問題,相信很多人都遇到過。接下來給大家具體講講這個問題,需要的朋友可以參考y一下，洗碗給對你有所幫助

re-render？

首先使用我的腳手架：

npm i ykj-cli -g?
ykj init App
cd ./app
yarn?
yarn dev

這樣一個webpack5、TS、React項(xiàng)目就搭建好了

我們目前只有一個APP組件，內(nèi)部代碼：

import Myy from './myy.jpg';

function App() {
? ? console.log('render')
? ? return (
? ? ? ? <div className="app">
? ? ? ? ? ? <h1>歡迎使用明源云 - 云空間前端通用腳手架</h1>
? ? ? ? ? ? <img src={Myy} alt="" style={{ width: 500, height: 500 }} />
? ? ? ? ? ? <h4>
? ? ? ? ? ? ? ? 加入我們：<a>453089136@qq.com</a>
? ? ? ? ? ? </h4>
? ? ? ? ? ? <h4>微前端,webpack5,TypeScript,React,vite應(yīng)有盡有</h4>
? ? ? ? </div>
? ? );
}

export default App;

刷新訪問頁面后，發(fā)現(xiàn)控制臺只打印了一次

OK，那我們正式開始，加入一些狀態(tài)，以及新增一個按鈕和SubApp組件

import { useState } from 'react';
import Myy from './myy.jpg';
import SubApp from './SubApp'
function App() {
? ? const [state, setState] = useState("Peter");
? ? return (
? ? ? ? <div className="app">
? ? ? ? ? ? <h1>歡迎使用明源云 - 云空間前端通用腳手架</h1>
? ? ? ? ? ? <img src={Myy} alt="" style={{ width: 500, height: 500 }} />
? ? ? ? ? ? <h4>
? ? ? ? ? ? ? ? 加入我們：<a>453089136@qq.com</a>
? ? ? ? ? ? </h4>
? ? ? ? ? ? <SubApp state={state} />
? ? ? ? ? ? <h4>微前端,webpack5,TypeScript,React,vite應(yīng)有盡有</h4>
? ? ? ? ? ? <button onClick={() => {
? ? ? ? ? ? ? ? setState('關(guān)注公眾號：前端巔峰')
? ? ? ? ? ? }}>測試按鈕</button>
? ? ? ? </div>
? ? );
}

export default App;


//SubApp組件
function SubApp({ state }) {
? ? console.log('render')
? ? return <h1>{state}</h1>
}

export default SubApp

這個時候點(diǎn)擊按鈕，又觸發(fā)了一次render

多次點(diǎn)擊，發(fā)現(xiàn)render只有一次，因?yàn)槲覀兇藭r每次點(diǎn)擊都是將state的值變成

那么，我們嘗試著將state變成一個對象

const [state, setState] = useState({ des: "Peter" });
? <button onClick={() => {
? ? ? ? ? ? ? ? setState({ des: '關(guān)注公眾號：前端巔峰' })
? ? ? ? ? ? }}>測試按鈕</button>

神奇的事情發(fā)生了，這里每次點(diǎn)擊設(shè)置同樣的state，都會觸發(fā)子組件render. - 這里就出現(xiàn)了re-render問題，我們其實(shí)都是拿的同樣的state,但是卻出現(xiàn)了不必要的render

錯誤的優(yōu)化

很多同學(xué)在使用React過程中會錯誤的使用PureComponent和useEffect以及UseMemo.

這里我們先用錯誤的方式引入useEffect,改造SubApp

import React, { useEffect, useState } from 'react';

function SubApp({ state }) {
? ? const [data, setData] = useState({})
? ? useEffect(() => {
? ? ? ? console.log('render')
? ? ? ? setData(state)
? ? }, [state])
? ? console.log('render')
? ? return <h1>{data.des}</h1>
}

export default SubApp

這里可以看到，每次點(diǎn)擊按鈕都在不斷render，使用了useEffect竟然失效了。這優(yōu)化無效~

這里就要談到useEffect的源碼實(shí)現(xiàn)，其實(shí)useEffect和PureComponent等一系列優(yōu)化手段，大都是使用了Object.is()這個算法。

MDN資料地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is

Object.is

Object.is() 方法判斷兩個值是否為同一個值。

value1
被比較的第一個值。
value2
被比較的第二個值。
返回值
一個 Boolean 類型標(biāo)示兩個參數(shù)是否是同一個值。

描述

Object.is() 方法判斷兩個值是否為同一個值。如果滿足以下條件則兩個值相等:

都是 undefined
都是 null
都是 true 或 false
都是相同長度的字符串且相同字符按相同順序排列
都是相同對象（意味著每個對象有同一個引用）
都是數(shù)字且
都是 +0
都是 -0
都是 NaN
或都是非零而且非 NaN 且為同一個值
與== (en-US) 運(yùn)算不同。== 運(yùn)算符在判斷相等前對兩邊的變量(如果它們不是同一類型) 進(jìn)行強(qiáng)制轉(zhuǎn)換 (這種行為的結(jié)果會將 "" == false 判斷為 true), 而 Object.is不會強(qiáng)制轉(zhuǎn)換兩邊的值。

與=== (en-US) 運(yùn)算也不相同。=== 運(yùn)算符 (也包括 == 運(yùn)算符) 將數(shù)字 -0 和 +0 視為相等，而將Number.NaN 與NaN視為不相等.

合理使用useEffect,解決re-render

如果Props傳入的是一個對象，那么由于React hooks每次更新都會生成一個全新的對象，而這個全新的對象和之前的對象，無法通過Object.is去對比，每次都會不相等。例如：

? const obj1 = {
? ? ? ? ? ? name: "peter"
? ? ? ? }
? ? ? ? const obj2 = {
? ? ? ? ? ? name: "peter"
? ? ? ? }

? ? ? ? console.log(Object.is(obj1, obj2, 'xx'))

這段代碼永遠(yuǎn)輸出都是false,因?yàn)閛bj1和obj2是兩個不同地址的引用對象

但是如果我們換一種方式：

Object.is(obj1.name, obj2.name )

這樣就可以正常比較，永遠(yuǎn)輸出ture了

那么我們現(xiàn)在也要在useEffect中類似這樣使用

? ? useEffect(() => {
? ? ? ? setData(state)
? ? ? ? console.log('render')
? ? }, [state.des])

這樣我們的useEffect內(nèi)部回調(diào)只會被觸發(fā)一次

簡單實(shí)現(xiàn)useEffect

網(wǎng)上抄的代碼改造了比較方法：

let _deps;
function useEffect(callback, dependencies) {
? const hasChanged = _deps
? ? && !dependencies.every((el, i) =>Object.is( el ,_deps[i]))
? ? || true;
? // 如果 dependencies 不存在，或者 dependencies 有變化，就執(zhí)行 callback
? if (!dependencies || hasChanged) {
? ? callback();
? ? _deps = dependencies;
? }
}