React避免不必要的重新渲染的方法示例
1. 使用 React.memo 緩存組件
React.memo 幫助你在組件的 props 沒有改變時跳過重新渲染。但是，如果不實現(xiàn)自定義比較函數(shù)，很容易濫用 React.memo。
不正確的用法：
const MemoizedComponent = React.memo(MyComponent);
這只檢查 props 引用是否發(fā)生了變化，這可能并不總是足夠的。
正確用法：
const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
return prevProps.itemId === nextProps.itemId;
});在這里，我們使用了一個自定義的比較函數(shù)，它只在 itemId prop 發(fā)生變化時觸發(fā)重新渲染。
2. 避免過度使用內聯(lián)函數(shù)
在 JSX 中使用內聯(lián)函數(shù)可能會導致不必要的重新渲染，因為 React 在每次渲染時都會將新函數(shù)視為新 prop。
不正確的用法：
function ButtonComponent() {
return <button onClick={() => handleClick()}>Click me</button>;
}這會導致在每次渲染時重新創(chuàng)建 handleClick，從而導致不必要的重新渲染。
正確用法：
import { useCallback } from 'react';
function ButtonComponent() {
const handleClick = useCallback(() => {
// Handle click logic
}, []);
return <button onClick={handleClick}>Click me</button>;
}通過使用 useCallback，我們記住了 handleClick 函數(shù)，防止了每次渲染時不必要的重新創(chuàng)建。
3. 利用 PureComponent
當使用類組件時，使用 React.PureComponent 可以確保組件僅在其 props 或 state 發(fā)生變化時重新渲染。如果你使用的是 React.Component，可能會導致不必要的重新渲染。
不正確的用法：
class CardComponent extends React.Component {
// Component logic
}正確用法：
class CardComponent extends React.PureComponent {
// Component logic
}通過擴展 React.PureComponent 將淺層比較 props 和 state，避免不必要的重新渲染。
4. 優(yōu)化功能組件中的 useSelector
當從 react-redux 使用 useSelector 時，只選擇必要的 state 切片很重要。
不正確的用法：
import { useSelector } from 'react-redux';
const DataComponent = () => {
const globalState = useSelector((state) => state);
// Render logic
};這將導致組件在狀態(tài)的任何部分發(fā)生變化時重新渲染。
正確用法：
import { useSelector } from 'react-redux';
const DataComponent = () => {
const selectedData = useSelector((state) => state.specificSlice);
// Render logic based on specific slice
};通過僅選擇狀態(tài)的必要部分，可以最大限度地減少重新渲染。
5. 在類組件中實現(xiàn) shouldComponentUpdate
對于不擴展 PureComponent 的類組件，手動實現(xiàn) shouldComponentUpdate 可以更精細地控制組件何時重新渲染。
不正確的用法：
class ListItem extends React.Component {
// Component logic
}這將在每次父組件渲染時重新渲染，即使 props 和 state 沒有改變。
正確用法：
class ListItem extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
}
// Component logic
}通過自定義 shouldComponentUpdate，我們確保組件僅在 itemId prop 或 value 狀態(tài)發(fā)生變化時重新渲染。
以上就是React避免重新渲染的方法示例的詳細內容，更多關于React避免重新渲染的資料請關注腳本之家其它相關文章！
相關文章
在React框架中實現(xiàn)一些AngularJS中ng指令的例子
這篇文章主要介紹了在JavaScript的React框架中實現(xiàn)一些AngularJS指令的例子,React使用Virtual DOM因而與普通的js框架有些不同,需要的朋友可以參考下2016-03-03
使用React Native創(chuàng)建以太坊錢包實現(xiàn)轉賬等功能
這篇文章主要介紹了使用React Native創(chuàng)建以太坊錢包，實現(xiàn)轉賬等功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要簡單分析了React中的EffectList，幫助大家更好的理解和學習使用React進行前端開發(fā)，感興趣的朋友可以了解下2021-04-04
React Native模塊之Permissions權限申請的實例相機
這篇文章主要介紹了React Native模塊之Permissions權限申請的實例相機的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了mobx在react hooks中的應用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
使用 React hooks 實現(xiàn)類所有生命周期
react 自 16.8 開始，引入了 Hooks 概念，使得函數(shù)組件中也可以擁有自己的狀態(tài)，并且可以模擬對應的生命周期，這篇文章主要介紹了使用 React hooks 怎么實現(xiàn)類里面的所有生命周期,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了詳解react-refetch的使用小例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
react中使用heatmap.js實現(xiàn)熱力圖的繪制
heatmap.js?是一個用于生成熱力圖的?JavaScript?庫,React?是一個流行的?JavaScript?庫,用于構建用戶界面,本小編給大家介紹了在React?應用程序中使用heatmap.js實現(xiàn)熱力圖的繪制的示例,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了react 創(chuàng)建單例組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04