1. 使用 React.memo 緩存組件

React.memo 幫助你在組件的 props 沒有改變時(shí)跳過重新渲染。但是，如果不實(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. 避免過度使用內(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>;
}

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

3. 利用 PureComponent

當(dāng)使用類組件時(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
}

通過擴(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
};

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

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

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

不正確的用法：

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

這將在每次父組件渲染時(shí)重新渲染，即使 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ā)生變化時(shí)重新渲染。

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

最新評論