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

const MemoizedComponent = React.memo(MyComponent);

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

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

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

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

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

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

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

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

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