首頁猿問 React -...

React - 重新渲染道具更改/動(dòng)態(tài)更改 css 而無需重新渲染

JavaScript

DIEA 2022-12-22 12:16:33

我需要在顯示/隱藏導(dǎo)航時(shí)隱藏 React 應(yīng)用程序上的頁面內(nèi)容。為此，我們將一個(gè) prop 傳遞給組件，并像這樣處理樣式化組件中的顯示 css：<PageContent isOpen={isOpen}>const PageContent = styled.div` display: ${props => (props.isOpen ? 'none' : 'block')}; `;雖然這工作正常，但當(dāng) prop 更改時(shí)，內(nèi)頁內(nèi)容會(huì)重新呈現(xiàn)，這是預(yù)期的但不是期望的。在這種情況下，頁面內(nèi)容包括一些從 API 獲取的內(nèi)容，因此每次打開/關(guān)閉導(dǎo)航時(shí)，我們都會(huì)再次呈現(xiàn)內(nèi)容并再次從 API 獲取不需要的內(nèi)容。有沒有辦法動(dòng)態(tài)控制隱藏/顯示主要內(nèi)容持有者，而無需每次都重新渲染？或者我們應(yīng)該更多地關(guān)注執(zhí)行獲取而不是更新它的組件？

查看完整描述

4 回答

郎朗坤

TA貢獻(xiàn)1921條經(jīng)驗(yàn) 獲得超9個(gè)贊

將組件 css 更改為顯示隱藏應(yīng)該只會(huì)在視覺上隱藏它，但組件仍應(yīng)掛載在 DOM 樹上。

也許你的 API 獲取是在每次重新渲染時(shí)發(fā)生的，而它應(yīng)該只在組件安裝時(shí)發(fā)生。

反對(duì) 回復(fù) 2022-12-22

至尊寶的傳說

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超10個(gè)贊

這正是預(yù)期的行為，您可以做的不是使用 CSS 隱藏組件，而是返回并清空 Fragment，如果“isOpen”為真，則阻止 API 調(diào)用，如果這些調(diào)用來自內(nèi)部組件

 <>
 </>

如果可能的話

反對(duì) 回復(fù) 2022-12-22

12345678_0001

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

我最終將不關(guān)心 parent 道具的主要內(nèi)容包裝在PureComponent.

React 的 PureComponent 對(duì)組件的 props 和 state 進(jìn)行了淺層比較。如果什么都沒有改變，它會(huì)阻止組件的重新渲染。如果發(fā)生了變化，它會(huì)重新渲染組件。

反對(duì) 回復(fù) 2022-12-22

三國(guó)紛爭(zhēng)

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊

每次組件觸發(fā)狀態(tài)更改時(shí)，即使子組件不依賴于該狀態(tài)，它的子組件也會(huì)重新渲染。要解決此問題，您需要將子組件包裝React.memo為功能組件或PureComponent用于類組件。這將檢查道具變化并重新渲染孩子。

這里有一個(gè)組件在掛載上獲取數(shù)據(jù)的示例，并有一個(gè)觸發(fā)狀態(tài)的按鈕click：代碼

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

import "./styles.css";

import MyData from "./MyData";

const fakePromise = () =>

new Promise((resolve) => {

setTimeout(() => {

resolve("data returned");

}, 2000);

});

export default function App() {

const [hidden, setHidden] = useState(false);

const [data, setData] = useState();

useEffect(() => {

const fetchData = async () => {

try {

const data = await fakePromise();

setData(data);

} catch (error) {

throw error;

}

};

fetchData();

}, []);

return (

<div style={{ display: hidden ? "none" : "block" }}>I am visible</div>

<button onClick={() => setHidden(!hidden)}>Toggle Visiblity</button>

{data && <MyData data={data} />}

</div>

);

}

在示例中，您可以看到MyData組件不依賴隱藏狀態(tài)，但如果我們不將其包裝在React.memo.

我的數(shù)據(jù).js

import React from "react";

const MyData = ({ data }) => {

console.log("render");

return (

<div>

</div>

);

};

//export default MyData;

export default React.memo(MyData);

注意：React.memo比較當(dāng)前道具和下一個(gè)道具，如果其中一些道具是函數(shù)或靜態(tài)數(shù)據(jù)，則array/object每次組件重新渲染時(shí)將重新創(chuàng)建這些道具，這將重新渲染孩子，因此您需要使用useCallback或之類的鉤子來記住這些道具useMemo。

謝謝希望這能回答你的問題。

反對(duì) 回復(fù) 2022-12-22