減少react組件不必要的重新渲染實現(xiàn)方法

更新時間：2023年01月09日 09:50:51 作者：糖瓶

這篇文章主要為大家介紹了減少react組件不必要的重新渲染實現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

什么是重新渲染

react重新渲染是當你的組件已經渲染在屏幕上，由于數(shù)據(jù)狀態(tài)變化，又重新觸發(fā)了組件的渲染。重新渲染是正?，F(xiàn)象，但有時由于自身代碼問題造成不必要的重新渲染。

不必要的重新渲染

由于錯誤的代碼引發(fā)組件的重新渲染。例如：與react組件本身無關的狀態(tài)變化引起的組件的重新渲染。雖然react組件重新渲染了，但由于渲染很快，通常用戶并不會感知到。但如果重新渲染發(fā)生比較復雜的組件上，可能會導致界面卡頓，甚至造成長時間的卡死現(xiàn)象。

react組件重新渲染情況

組件的重新渲染分為以下幾種情況：

state變化

count變化會引起組件的重新渲染。

const App = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count+1)
  }
  return <div onClick={handleClick}>{count}</div>
}

父組件的重新渲染

當組件的父組件重新渲染時，該組件必定重新渲染。一般情況下子組件的渲染不會觸發(fā)父組件的渲染。

實際上props變化也是由于父組件狀態(tài)變化引起的，只要父組件重新渲染，子組件不管props有沒有變化都會重新渲染。（沒有使用優(yōu)化時）

import { useState } from "react";
const Child = () => {
  console.log("子組件重新渲染");
  const [childCount, setChildCount] = useState(0);
  const handleChildClick = () => {
    setChildCount(childCount + 1);
  };
  return (
    <>
      <div onClick={handleChildClick}>Child {childCount}</div>
    </>
  );
};
export default function StateChange() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  console.log("父組件重新渲染", count);
  return (
    <div>
      <div onClick={handleClick}>parent {count}</div>
      <Child />
    </div>
  );
}

context變化

當context的Provider提供的值放生變化，所有使用該context的組件都將重新渲染。

import { createContext, useState, useContext, useMemo } from "react";
const Context = createContext({ val: 0 });
const Provider = ({ children }) => {
  const [val, setVal] = useState(0);
  const handleClick = () => {
    setVal(val + 1);
  };
  const value = useMemo(() => {
    return {
      val: val
    };
  }, [val]);
  return (
    <Context.Provider value={value}>
      {children}
      <button onClick={handleClick}>context change</button>
    </Context.Provider>
  );
};
const useVal = () => useContext(Context);
const Child1 = () => {
  const { val } = useVal();
  console.log("Child1重新渲染", val);
  return <div>Child1</div>;
};
const Child2 = () => {
  const { val } = useVal();
  console.log("Child2重新渲染", val);
  return <div>Child2</div>;
};
export default function ContextChange() {
  return (
    <Provider>
      <Child1 />
      <Child2 />
    </Provider>
  );
}

在組件內創(chuàng)建組件

?：這種做法非常消耗性能。當組件重新渲染，內部組件都會重新mount。這種做法容易導致很多bug出現(xiàn)。

import { useState, useEffect } from "react";
const Component = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  const InComponent = () => {
    console.log("內部組件重新渲染");
    useEffect(() => {
      console.log("內部組件重新mount");
    }, []);
    return <div>inComponent</div>;
  };
  return (
    <>
      <button onClick={onClick}>點我</button>
      <InComponent />
    </>
  );
};
export default function ComInComponent() {
  return (
    <>
      <Component />
    </>
  );
}

一些減少重新渲染的方法

useState初始值使用函數(shù)形式

看一個例子：useState的初始值經過a + 1計算得到: 此時的useState的參數(shù)是一個函數(shù)執(zhí)行，也就是一個值

import { useState } from "react";
function getInitState() {
  console.count("獲取初始化的值");
  const a = 1;
  return a + 1;
}
const App = () => {
  const [value, setValue] = useState(getInitState());
  const onChange = (event) => setValue(event.target.value);
  return <input type="text" value={value} onChange={onChange} />;
};
export default App;

當我們在input中繼續(xù)輸入，可以看到getInitState的console次數(shù)：

當我們把useState第一個參數(shù)改為函數(shù)時：（該函數(shù)會自動調用）

import { useState } from "react";
function getInitState() {
  console.count("獲取初始化的值");
  const a = 1;
  return a + 1;
}
const App = () => {
  const [value, setValue] = useState(getInitState);
  const onChange = (event) => setValue(event.target.value);
  return <input type="text" value={value} onChange={onChange} />;
};
export default App;

該函數(shù)只會在初始化的時候調用一次：

重新組織組件結構

提取單獨的組件，獨自維護自己的狀態(tài)，防止發(fā)生不必要的渲染。

import { useState } from "react";
const BigComponent = () => {
  console.log("一個非常復雜的大組件：渲染了");
  return <div>BigComponent</div>;
};
const AllComponent = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次數(shù): {state}</p>
      <button onClick={onClick}>點我</button>
      <BigComponent />
    </>
  );
};
const ButtonComponent = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次數(shù): {state}</p>
      <button onClick={onClick}>點我</button>
    </>
  );
};
const SplitComponent = () => {
  return (
    <>
      <ButtonComponent />
      <BigComponent />
    </>
  );
};
const App = () => {
  return (
    <>
      <p>AllComponent是沒有重新組織的組件</p>
      <AllComponent />
      <hr />
      <p>SplitComponent是重新組織劃分的組件, 不會觸發(fā)大組件BigComponent的渲染</p>
      <SplitComponent />
    </>
  );
};
export default App;

巧用props.children

利用props.children 來減少不必要的重復渲染。

import { useState } from "react";
const BigComponent = () => {
  console.log("一個非常復雜的大組件：渲染了");
  return <div>BigComponent</div>;
};
const AllComponent = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次數(shù): {state}</p>
      <button onClick={onClick}>點我</button>
      <BigComponent />
    </>
  );
};
const ComponentWithChildren = ({ children }) => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次數(shù): {state}</p>
      <button onClick={onClick}>點我</button>
      {children}
    </>
  );
};
const SplitComponent = () => {
  return (
    <ComponentWithChildren>
      <BigComponent />
    </ComponentWithChildren>
  );
};
const App = () => {
  return (
    <>
      <p>AllComponent是沒有重新組織的組件</p>
      <AllComponent />
      <hr />
      <p>
        SplitComponent是巧用了children的組件, 不會觸發(fā)大組件BigComponent的渲染
      </p>
      <SplitComponent />
    </>
  );
};
export default App;

把組件當成props傳遞

把組件當成props傳遞給其他組件，也可以減少渲染。(與children類似)

import { useState } from "react";
const BigComponent = () => {
  console.log("一個非常復雜的大組件：渲染了");
  return <div>BigComponent</div>;
};
const AllComponent = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次數(shù): {state}</p>
      <button onClick={onClick}>點我</button>
      <BigComponent />
    </>
  );
};
const ComponentWithProps = ({ comp }) => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  return (
    <>
      <p>重新渲染次數(shù): {state}</p>
      <button onClick={onClick}>點我</button>
      {comp}
    </>
  );
};
const comp = <BigComponent />;
const SplitComponent = () => {
  return (
    <>
      <ComponentWithProps comp={comp} />
    </>
  );
};
const App = () => {
  return (
    <>
      <p>AllComponent是沒有重新組織的組件</p>
      <AllComponent />
      <hr />
      <p>
        SplitComponent是把組件當成props傳遞, 不會觸發(fā)大組件BigComponent的渲染
      </p>
      <SplitComponent />
    </>
  );
};
export default App;

React.memo

memo 減少重復渲染，只要子組件的props沒有改變（淺比較）。

import { useState, memo } from "react";
const Child = () => {
  console.log("子組件重新渲染");
  return (
    <>
      <div>Child</div>
    </>
  );
};
const MemoChild = memo(Child);
export default function ReactMemo() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <div onClick={handleClick}>parent {count}</div>
      <MemoChild />
    </div>
  );
}

如果props是一個object， array 或者 function，memo必須配合useMemo來緩存，單獨使用都不起作用。

當然也可以單獨使用useMemo緩存整個組件。

import React, { useState, useMemo } from "react";
const Child = ({ value }) => {
  console.log("Child重新渲染", value.value);
  return <>{value.value}</>;
};
const values = [1, 2, 3];
const UseMemp = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    setState(state + 1);
  };
  // 使用useMemo緩存組件
  const items = useMemo(() => {
    return values.map((val) => <Child key={val} value={{ value: val }} />);
  }, []);
  return (
    <>
      <button onClick={onClick}>點我 {state}</button>
      <br />
      {items}
    </>
  );
};
export default UseMemp;

useCallback

函數(shù)傳遞可以使用useCallback來緩存函數(shù)。

key值

在循環(huán)數(shù)組時，有人使用index作為key，可以這樣做，但是你要保證你的數(shù)組是靜態(tài)的，沒有新增，刪除，插入，排序等情況，否則不能使用index作為key。

完整的代碼：

codesandbox.io/s/hidden-me…

參考

reactjs.org/docs/hooks-…

medium.com/@guptagarud…

以上就是減少react組件不必要的重新渲染實現(xiàn)方法的詳細內容，更多關于減少react組件重新渲染的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點
這篇文章主要介紹了React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02
react中代碼塊輸出,代碼高亮顯示,帶行號,能復制的問題
這篇文章主要介紹了react中代碼塊輸出，代碼高亮顯示，帶行號，能復制的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
React各種狀態(tài)管理器的解讀及使用方法
這篇文章主要介紹了對于React各種狀態(tài)管理器的解讀,文中給大家提到了狀態(tài)管理器是如何使用的，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-12-12
React-Native中props具體使用詳解
本篇文章主要介紹了React-Native中props具體使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
React中組件優(yōu)化的最佳方案分享
React組件性能優(yōu)化可以減少渲染真實DOM的頻率,以及減少VD比對的頻率,本文為大家整理了一些有效的React組件優(yōu)化方法,需要的小伙伴可以參考下
2023-12-12
Reactjs實現(xiàn)通用分頁組件的實例代碼
這篇文章主要介紹了Reactjs實現(xiàn)通用分頁組件的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-01-01
react實現(xiàn)antd線上主題動態(tài)切換功能
這篇文章主要介紹了react實現(xiàn)antd線上主題動態(tài)切換功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-08-08
React Native自定義控件底部抽屜菜單的示例
本篇文章主要介紹了React Native自定義控件底部抽屜菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
React解析html 標簽的方法
在React中,解析HTML標簽通常是使用JSX（JavaScript XML）語法的一部分,這篇文章主要介紹了React 用來解析html 標簽的方法,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2023-08-08
React項目build打包頁面空白的解決方案
React項目執(zhí)行build命令后,在本地服務器打開頁面是空白的,本文主要介紹了React項目build打包頁面空白的解決方案,感興趣的可以了解一下
2023-08-08