Reactでコンポーネントのレンダリングを防ぐ方法は何ですか？

2年 ago
光, 明
1 minute

Reactでは、コンポーネントのレンダリングを防ぐには、以下の方法を使用できます：

  1. コンポーネントのshouldComponentUpdate()ライフサイクルメソッドを使用すると、特定の条件に基づいてコンポーネントを再レンダリングするかどうかを決定することができます。このメソッドがfalseを返す場合は、コンポーネントは再レンダリングされません。
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 根据条件判断是否需要重新渲染组件
    if (/* 条件 */) {
      return false;
    }
    return true;
  }

  render() {
    // 组件的渲染逻辑
    return (
      // JSX代码
    );
  }
}
  1. React.memo()を使用した高階コンポーネント：React.memo()は、関数コンポーネントをラップするために使用できる高階コンポーネントであり、コンポーネントのpropsが変化していない場合に再レンダリングを防止することができます。
const MyComponent = React.memo((props) => {
  // 组件的渲染逻辑
  return (
    // JSX代码
  );
});
  1. React.PureComponentクラスを使用すると、shouldComponentUpdate()メソッドを自動的に実装しているため、propsやstateの変更がない場合はコンポーネントを再描画しない子クラスの一つです。
class MyComponent extends React.PureComponent {
  render() {
    // 组件的渲染逻辑
    return (
      // JSX代码
    );
  }
}

必要に応じて、コンポーネントのレンダリングを停止するための適切な方法を選択することができます。

bannerAds