首頁猿問如何防止重新選擇重新渲染？

如何防止重新選擇重新渲染？

JavaScript

森林海 2022-05-22 11:14:09

我今天正在嘗試reselect中間件并防止不必要的重新渲染。這是我的 reducer.js：const INITIAL_STATE = { dogs: 100, cats: 12312302384};const pets = (state = INITIAL_STATE, action) => { switch (action.type) { case "CHANGE_DOGS": return { ...state, dogs: state.dogs + 1 }; case "CHANGE_CATS": return { ...state, cats: state.cats + 1 }; default: return { ...state }; }};export default pets;這是我的 main.js：import React from "react";import { createSelector } from "reselect";import { useSelector, useDispatch } from "react-redux";function ReduxDeneme(props) { // Selectors - Classic style - NON Memoized!// const dogsData = useSelector(state => state.pets.dogs);// const catsData = useSelector(state => state.pets.cats); // Dogs rendering.. --> First opening.. // 10:11:28.070 index.js:18 CATS rendering.. --> First opening.. // 10:11:29.703 index.js:13 Dogs rendering.. --> Press "ChangeDogs" button. // 10:11:29.703 index.js:18 CATS rendering.. --> Press "ChangeDogs" button. // 10:11:33.143 index.js:13 Dogs rendering.. --> Press "ChangeCats" button. // 10:11:33.143 index.js:18 CATS rendering.. --> Press "ChangeCats" button. // Selectors - Memoized version RESELECT middleware'i ile.. const dogsDataMemo = createSelector( state => state.pets.dogs, dogs => dogs ); const catsDataMemo = createSelector( state => state.pets.cats, cats => cats ); const dogsData = useSelector(dogsDataMemo) const catsData = useSelector(catsDataMemo) // Components const Dogs = ({ dogsData }) => { console.log("Dogs rendering.."); return <h1>{dogsData}</h1>; }; const Cats = ({ catsData }) => { console.log("Cats rendering.."); return <h1>{catsData}</h1>; );}export default ReduxDeneme;1. 場景：我使用了經(jīng)典的、非記憶的樣式選擇器?？刂婆_上有6次console.log。（第一次打開2次-正常-，點(diǎn)擊“換狗”按鈕2次，點(diǎn)擊“換貓”按鈕2次）。這意味著發(fā)生了 6 次重新渲染。2. 場景：我使用reselect了中間件來防止不必要的重新渲染。但是，它不起作用或者我誤解了reselect.有人可以解釋正確的方法或我在哪里做錯了嗎？

查看完整描述

2 回答

HUX布斯

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個贊

您正在組件內(nèi)定義選擇器。你應(yīng)該在外面做（例如你的減速器附近的某個地方）。

目前，您正在每次渲染后重新創(chuàng)建選擇器。這是一個更好的方法：

// inside reducer.js

export const petsSel = state => state.pets;

export const dogsDataMemo = createSelector(

petsSel,

pets => pets.dogs

);

export const catsDataMemo = createSelector(

petsSel,

pets => pets.cats

);

根據(jù)您的代碼添加了帶有工作示例的代碼框：https ://codesandbox.io/s/delicate-snowflake-5ssrw

為了實(shí)現(xiàn)你想要的，你還需要使用 React.memo ( https://reactjs.org/docs/react-api.html#reactmemo )：

const Dogs = React.memo(({ dogsData }) => {

console.log("Dogs rendering..");

return <h1>{dogsData}</h1>;

});

反對回復(fù) 2022-05-22

PIPIONE

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

首先，我非常感謝@tudor 的努力。他說的都是對的。

但是，我想證明 Reselect 有效。

場景 1 - 非記憶

import React, { memo } from "react";

import { useSelector, useDispatch } from "react-redux";

// import { catsDataMemo, dogsDataMemo } from "./selectors";

// Components

const Dogs = memo(({ dogsData }) => {

console.log("Dogs rendering..");

return <h1>{dogsData}</h1>;

});

const Cats = memo(({ catsData }) => {

console.log("Cats rendering..");

return <h1>{catsData}</h1>;

});

function ReduxDeneme() {

// Standart useSelector without MEMOIZED

const dogsData = useSelector(

state => state.pets.dogs,

console.log("dogsData Selector ?al??t?.")

);

const catsData = useSelector(

state => state.pets.cats,

console.log("catsData Selector ?al??t?.")

);

// Actions

const dispatch = useDispatch();

const changeDogs = () => dispatch({ type: "CHANGE_DOGS" });

const changeCats = () => dispatch({ type: "CHANGE_CATS" });

const noChangeCats = () =>

dispatch({ type: "NO_CHANGE_CATS", payload: catsData });

return (

<div>

<button onClick={changeDogs}>Change Dogs</button>

<button onClick={changeCats}>Change CATS</button>

<button onClick={noChangeCats}>No Change</button>

</div>

);

}

export default memo(ReduxDeneme);

當(dāng)心！當(dāng)您單擊“更改狗”按鈕時，控制臺中的輸出將是：

dogsData Selector ?al??t?.

catsData Selector ?al??t?.

Dogs rendering..

或者當(dāng)您單擊“更改貓”按鈕時，輸出將是：

dogsData Selector ?al??t?.

catsData Selector ?al??t?.

Cats rendering..

無論您按什么按鈕，這兩個 useSelectors 都將起作用，正如您從 console.log 中看到的那樣

場景 2 - 使用重新選擇中間件進(jìn)行記憶

首先，正如@tudor.gergely 提到的，我們將記憶選擇器分離到另一個文件中。

小心點(diǎn)！您必須定義對象的正確路徑。

// selectors.js

import { createSelector } from "reselect";

export const dogsDataMemo = createSelector(

state => state.pets.dogs, // BE CAREFULL while defining..

dogs => {

console.log("DogsDataMemo has worked.");

return dogs;

}

);

export const catsDataMemo = createSelector(

state => state.pets.cats, // BE CAREFULL while defining..

cats => {

console.log("CatsDataMemo has worked.");

return cats;

}

);

然后，我們將這個文件導(dǎo)入到 main.js 文件中，并再次將 useSelector 與我們的記憶選擇器一起使用：

import React, { memo } from "react";

import { useSelector, useDispatch } from "react-redux";

import { catsDataMemo, dogsDataMemo } from "./selectors";

// Components

const Dogs = memo(({ dogsData }) => {

console.log("Dogs rendering..");

return <h1>{dogsData}</h1>;

});

const Cats = memo(({ catsData }) => {

console.log("Cats rendering..");

return <h1>{catsData}</h1>;

});

function ReduxDeneme() {

const dogsData = useSelector(dogsDataMemo);

const catsData = useSelector(catsDataMemo);

// Actions

const dispatch = useDispatch();

const changeDogs = () => dispatch({ type: "CHANGE_DOGS" });

const changeCats = () => dispatch({ type: "CHANGE_CATS" });

const noChangeCats = () =>

dispatch({ type: "NO_CHANGE_CATS", payload: catsData });

return (

<div>

<button onClick={changeDogs}>Change Dogs</button>

<button onClick={changeCats}>Change CATS</button>

<button onClick={noChangeCats}>No Change</button>

</div>

);

}

export default memo(ReduxDeneme);

和最終輸出：

單擊“更改狗”按鈕時：

DogsDataMemo has worked.

Dogs rendering

單擊“更改貓”按鈕時：

CatsDataMemo has worked.

Cats rendering..

反對回復(fù) 2022-05-22

2 回答
0 關(guān)注
153 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何防止重新選擇重新渲染？

如何防止重新選擇重新渲染？

2 回答

添加回答