快捷導(dǎo)航

React避免不必要的重新渲染的方法示例

更新時(shí)間：2024年10月11日 09:38:17 作者：liangshanbo1215

構(gòu)建高性能?React?應(yīng)用程序的關(guān)鍵之一是避免不必要的重新渲染,React?的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至關(guān)重要,在這篇文章中,我們將介紹常見(jiàn)錯(cuò)誤以及如何避免它們,需要的朋友可以參考下

1. 使用 React.memo 緩存組件

React.memo 幫助你在組件的 props 沒(méi)有改變時(shí)跳過(guò)重新渲染。但是，如果不實(shí)現(xiàn)自定義比較函數(shù)，很容易濫用 React.memo。

不正確的用法：

const MemoizedComponent = React.memo(MyComponent);

這只檢查 props 引用是否發(fā)生了變化，這可能并不總是足夠的。

正確用法：

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

在這里，我們使用了一個(gè)自定義的比較函數(shù)，它只在 itemId prop 發(fā)生變化時(shí)觸發(fā)重新渲染。

2. 避免過(guò)度使用內(nèi)聯(lián)函數(shù)

在 JSX 中使用內(nèi)聯(lián)函數(shù)可能會(huì)導(dǎo)致不必要的重新渲染，因?yàn)?React 在每次渲染時(shí)都會(huì)將新函數(shù)視為新 prop。

不正確的用法：

function ButtonComponent() {
  return <button onClick={() => handleClick()}>Click me</button>;
}

這會(huì)導(dǎo)致在每次渲染時(shí)重新創(chuàng)建 handleClick，從而導(dǎo)致不必要的重新渲染。

正確用法：

import { useCallback } from 'react';
 
function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);
 
  return <button onClick={handleClick}>Click me</button>;
}

通過(guò)使用 useCallback，我們記住了 handleClick 函數(shù)，防止了每次渲染時(shí)不必要的重新創(chuàng)建。

3. 利用 PureComponent

當(dāng)使用類(lèi)組件時(shí)，使用 React.PureComponent 可以確保組件僅在其 props 或 state 發(fā)生變化時(shí)重新渲染。如果你使用的是 React.Component，可能會(huì)導(dǎo)致不必要的重新渲染。

不正確的用法：

class CardComponent extends React.Component {
  // Component logic
}

正確用法：

class CardComponent extends React.PureComponent {
  // Component logic
}

通過(guò)擴(kuò)展 React.PureComponent 將淺層比較 props 和 state，避免不必要的重新渲染。

4. 優(yōu)化功能組件中的 useSelector

當(dāng)從 react-redux 使用 useSelector 時(shí)，只選擇必要的 state 切片很重要。

不正確的用法：

import { useSelector } from 'react-redux';
 
const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

這將導(dǎo)致組件在狀態(tài)的任何部分發(fā)生變化時(shí)重新渲染。

正確用法：

import { useSelector } from 'react-redux';
 
const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

通過(guò)僅選擇狀態(tài)的必要部分，可以最大限度地減少重新渲染。

5. 在類(lèi)組件中實(shí)現(xiàn) shouldComponentUpdate

對(duì)于不擴(kuò)展 PureComponent 的類(lèi)組件，手動(dòng)實(shí)現(xiàn) shouldComponentUpdate 可以更精細(xì)地控制組件何時(shí)重新渲染。

不正確的用法：

class ListItem extends React.Component {
  // Component logic
}

這將在每次父組件渲染時(shí)重新渲染，即使 props 和 state 沒(méi)有改變。

正確用法：

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }
 
  // Component logic
}

通過(guò)自定義 shouldComponentUpdate，我們確保組件僅在 itemId prop 或 value 狀態(tài)發(fā)生變化時(shí)重新渲染。

以上就是React避免重新渲染的方法示例的詳細(xì)內(nèi)容，更多關(guān)于React避免重新渲染的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: