すべての開発者が知っておくべき React の重要なトリック

React は信じられないほど強力ですが、これをマスターするには、基本を超えて、開発を効率化するためのあまり知られていないトリックを学ぶ必要があります。ここでは、生産性を向上させ、よりクリーンで効果的なコードを作成するのに役立つ、私が個人的に気に入っている React の 20 のテクニックをまとめました。早速例を見ていきましょう!

---

1. 条件付きレンダリングのショート評価

短絡評価による条件付きレンダリングでは、冗長な if ステートメントを避けてください。

{isLoading && <Spinner />}

これにより、 がレンダリングされます。 isLoading が true の場合にのみ、JSX をクリーンな状態に保ちます。

---

2. クラス名ライブラリを使用した動的クラス名

クラス名ライブラリを使用すると、条件付きでクラスを簡単に適用できます。

npm install classnames

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

3. useMemo を使用して高価な計算をメモする

計算にコストがかかる場合は、React が不必要に再計算しないように計算をメモ化します。

const sortedData = useMemo(() => data.sort(), [data]);

これは、データが変更された場合にのみ、sortedData を再計算します。

---

4. useEffect による入力のデバウンス

入力変更をデバウンスすることで、定期的な再レンダリングを回避します。

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

5. 再利用可能なロジック用のカスタムフック

ロジックをカスタム フックにカプセル化し、コンポーネント間で再利用します。

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

6. React.lazy によるコンポーネントの遅延読み込み

コンポーネントを分割して読み込み時間を最適化します。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

7. useRef を使用した前の Props または State へのアクセス

以前の状態値にアクセスするには、useRef を使用します。

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

---

8. 関数を useCallback に渡して再レンダリングを回避します

関数を変更する必要がない場合は、useCallback を使用してメモ化します。

const increment = useCallback(() => setCount(count + 1), [count]);

---

9. よりクリーンなコードのための小道具の構造化

関数パラメータ内でプロパティを直接構造化します。

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

10. 余分な div を使用せずに要素をグループ化するための React.Fragment

余分な DOM ノードを追加せずに要素をラップします。

<>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</>

---

11. JavaScript エラーを検出するためのエラー境界

子コンポーネントのエラーをキャッチして、アプリ全体のクラッシュを防ぎます。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

Jagroup2001 (ジャグループ) · GitHub

?‍?フルスタック開発者 | ?機械学習開発者 | ?開発関係プロ – ?レンタル可能 - Jagroup2001

github.com

12. PropType を使用した Prop 検証

プロップタイプを定義することでバグを早期に発見します。

{isLoading && <Spinner />}

---

13. useReducer を使用した状態リデューサー

複雑な状態ロジックの場合、useReducer を使用するとより効率的です。

npm install classnames

---

14. DOM 操作に LayoutEffect を使用する

DOM の更新後、ペイント前にエフェクトを実行します。

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

15. コンテキストと useContext を使用して状態ロジックをカプセル化する

プロップドリルを使用せずにグローバル状態を作成します。

const sortedData = useMemo(() => data.sort(), [data]);

---

16. JSX でのインライン関数定義を避ける

関数をインラインで定義すると、再レンダリングが発生します。代わりに、外部で定義してください。

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

17. 安全なプロパティ アクセスのために JSX でオプションのチェーンを使用する

null または未定義の値を適切に処理します。

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

18. キー プロップを使用して再レンダリングの問題を回避します

リストをレンダリングするときは、常に一意のキーを使用してください。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

19. インポート制御を改善するために名前付きエクスポートを使用してコンポーネントをエクスポートする

名前付きエクスポートにより、特定のコンポーネントのインポートが簡単になります。

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

その後、必要に応じてインポートします。

const increment = useCallback(() => setCount(count + 1), [count]);

---

20. 再利用可能なコンポーネント パターン: 高次コンポーネント (HOC)

追加のロジックを追加するには、コンポーネントを HOC でラップします。

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

これらのトリックをマスターすると、より簡潔で読みやすく効率的な React コードを作成できるようになります。コーディングを楽しんでください!

以上がすべての開発者が知っておくべき React の重要なトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。