快捷導(dǎo)航

react組件多次渲染問題的解決

更新時(shí)間：2023年07月20日 10:21:44 作者：Ruonorth

本文主要介紹了react組件多次渲染問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題背景

在數(shù)據(jù)沒有發(fā)生變化的情況下React組件會(huì)進(jìn)行數(shù)次重復(fù)渲染，繪制出來完全相同的兩個(gè)圖

排查思路

尋找子組件重渲染原因?qū)嶒?yàn)

測(cè)試一：在子組件的props未發(fā)生任何變更的情況下是否會(huì)發(fā)生重新渲染

import React, { useState } from "react"
import { Select } from "antd"
const { Option } = Select
export function Chart() {
? ? console.log("父組件重新渲染了")
? ? const [selectedOption, setSelectedOption] = useState("option1")
? ? function handleSelectChange(value) {
? ? ? ? setSelectedOption(value)
? ? }
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <Select defaultValue={selectedOption} onChange={handleSelectChange}>
? ? ? ? ? ? ? ? <Option value="option1">Option 1</Option>
? ? ? ? ? ? ? ? <Option value="option2">Option 2</Option>
? ? ? ? ? ? ? ? <Option value="option3">Option 3</Option>
? ? ? ? ? ? </Select>
? ? ? ? ? ? <ChildComponent />
? ? ? ? </div>
? ? )
}
function ChildComponent() {
? ? console.log("ChildComponent重新渲染了")
? ? return <div>Hello from ChildComponent</div>
}

測(cè)試結(jié)論：子組件即使不接收任何props當(dāng)父組件重新渲染時(shí)子組件也會(huì)重新渲染

解決方案

使用React.memo，關(guān)于memo介紹如下：

包裝一個(gè)組件memo以獲得該組件的記憶版本。只要組件的 props 沒有改變，當(dāng)它的父組件重新渲染時(shí)，組件的這個(gè)記憶版本通常不會(huì)被重新渲染。

但 React 可能仍然會(huì)重新渲染它：memoization 是一種性能優(yōu)化，而不是保證。

import React, { useState } from "react"
import { Select } from "antd"
const { Option } = Select
export function Chart() {
? ? console.log("父組件重新渲染了")
? ? const [selectedOption, setSelectedOption] = useState("option1")
? ? function handleSelectChange(value) {
? ? ? ? setSelectedOption(value)
? ? }
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <Select defaultValue={selectedOption} onChange={handleSelectChange}>
? ? ? ? ? ? ? ? <Option value="option1">Option 1</Option>
? ? ? ? ? ? ? ? <Option value="option2">Option 2</Option>
? ? ? ? ? ? ? ? <Option value="option3">Option 3</Option>
? ? ? ? ? ? </Select>
? ? ? ? ? ? {/* <ChildComponent /> */}
? ? ? ? ? ? <MemoChild />
? ? ? ? </div>
? ? )
}
function ChildComponent() {
? ? console.log("ChildComponent重新渲染了")
? ? return <div>Hello from ChildComponent</div>
}
const MemoChild = React.memo(ChildComponent)

即使使用memo，但其仍然會(huì)在其接受的props發(fā)生變更時(shí)及其所在的上下文發(fā)生變更時(shí)重新渲染。

因此為了更好的使用memo，應(yīng)當(dāng)盡量減少props的變化。具體方案如下：

當(dāng)props為引用值時(shí)應(yīng)當(dāng)使用useMemo返回相同引用值
使得 props 中接受最少的必要信息
當(dāng)props包含函數(shù)時(shí)，要么在組件外部聲明它以使其永遠(yuǎn)不會(huì)更改，要么useCallback在重新渲染之間緩存其定義。

例如：當(dāng)props為對(duì)象時(shí)，應(yīng)當(dāng)減少props對(duì)象的變化

測(cè)試內(nèi)組件對(duì)memo的影響

接下來進(jìn)行另外的測(cè)試，將子組件放在Adapt中稱為內(nèi)部組件

可以發(fā)現(xiàn)，此時(shí)子組件的緩存失效了，盡管子組件沒有props的變化

但每次父組件重新渲染子組件仍然會(huì)重新渲染

import React, { useState } from "react"
import { Select } from "antd"
const { Option } = Select
export function Adapt() {
? ? console.log("父組件重新渲染了")
? ? const [selectedOption, setSelectedOption] = useState("option1")
? ? function handleSelectChange(value) {
? ? ? ? setSelectedOption(value)
? ? }
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <Select defaultValue={selectedOption} onChange={handleSelectChange}>
? ? ? ? ? ? ? ? <Option value="option1">Option 1</Option>
? ? ? ? ? ? ? ? <Option value="option2">Option 2</Option>
? ? ? ? ? ? ? ? <Option value="option3">Option 3</Option>
? ? ? ? ? ? </Select>
? ? ? ? ? ? {/* <ChildComponent /> */}
? ? ? ? ? ? <MemoChild />
? ? ? ? </div>
? ? )
}
function ChildComponent() {
? ? console.log("ChildComponent重新渲染了")
? ? return <div>Hello from ChildComponent</div>
}
const MemoChild = React.memo(ChildComponent)

React.memo 失效的原因是因?yàn)閷?ChildComponent 和 MemoChild 定義在了 Adapt 組件的內(nèi)部。這意味著每當(dāng) Adapt 組件重新渲染時(shí)，ChildComponent 和 MemoChild 都會(huì)重新定義，導(dǎo)致了緩存失效。

測(cè)試props變更對(duì)memo的影響

改寫測(cè)試用例，測(cè)試當(dāng)父組件的props變更時(shí)，子組件是否重新渲染

import React, { useState } from "react"
import { Select } from "antd"
const { Option } = Select
export function Adapt() {
? ? console.log("Adapt重新渲染了")
? ? const [filterList, setFilterList] = useState(null)
? ? function onRefresh(value) {
? ? ? ? setFilterList(value)
? ? }
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <Chart {...{ onRefresh, filterList }} />
? ? ? ? </div>
? ? )
}
function Chart({ filterList, onRefresh }) {
? ? console.log("Chart重新渲染了")
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <Select value={filterList} onChange={onRefresh}>
? ? ? ? ? ? ? ? <Option value="option1">Option 1</Option>
? ? ? ? ? ? ? ? <Option value="option2">Option 2</Option>
? ? ? ? ? ? ? ? <Option value="option3">Option 3</Option>
? ? ? ? ? ? </Select>
? ? ? ? ? ? <MemoChild />
? ? ? ? </div>
? ? )
}
function ChildComponent() {
? ? console.log("ChildComponent重新渲染了")
? ? return <div>hello</div>
}
const MemoChild = React.memo(ChildComponent)
export default Adapt

子組件仍然可以進(jìn)行正常的緩存，可得知當(dāng)子組件使用memo

無論是父組件的state或者props狀態(tài)變更，只要子組件的props和上下文未變化都不會(huì)影響到子組件

問題結(jié)論

導(dǎo)致組件重復(fù)渲染的可能如下：

當(dāng)子組件未使用memo時(shí)，子組件會(huì)隨著父組件一起重新渲染，因此即使子組件的props未變化仍會(huì)多次渲染子組件
當(dāng)子組件使用了memo，但仍然重新渲染
- 子組件接受的props或者context變更了
- 子組件的上下文及props都沒變更，但子組件時(shí)內(nèi)部組件所以每次都是重新創(chuàng)建的

因此為了優(yōu)化子組件的多次渲染應(yīng)當(dāng)注意：