すべての開発者が知っておくべき便利な React.js ハック

React.js は、ユーザー インターフェイス、特にシングルページ アプリケーションを構築するための最も人気のある JavaScript ライブラリの 1 つになりました。コンポーネントベースのアーキテクチャと効率的なレンダリングにより、開発者のお気に入りとなっています。初心者でも経験豊富な開発者でも、開発プロセスをより効率的にし、コードをよりエレガントにするために学ぶべき新しいヒントやコツが常にあります。以下に、開発者が知っておくべき 11 の React.js の役立つヒントを示します。

1. フックで関数コンポーネントを使用する

React Hooks の導入により、機能コンポーネントはこれまで以上に強力になりました。フックを使用すると、クラスを作成せずに状態やその他の React 機能を使用できるようになります。これにより、コードがよりクリーンになり、理解しやすくなります。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

2. React.memo メモリ コンポーネントを使用する

パフォーマンスを最適化するために、React.memo を使用して関数コンポーネントを記憶できます。プロップを比較することで、プロップが変更された場合にのみ再レンダリングされるため、不必要な再レンダリングが回避されます。

import React from 'react';

const MemoizedComponent = React.memo(({ value }) => {
  console.log('Rendering...');
  return <div>{value}</div>;
});

export default MemoizedComponent;

3. 副作用に対処するには useEffect を使用します

useEffect フックは、関数コンポーネントで副作用を実行するために使用されます。データの取得、サブスクリプション、または DOM への手動変更に使用できます。

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'} ); }; export default DataFetcher;

4. 再利用可能なロジックを実装するためのカスタマイズされたフック

カスタム フックを使用すると、さまざまなコンポーネントでロジックを抽出して再利用できます。これにより、コードの再利用が促進され、コンポーネントがクリーンな状態に保たれます。

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetch;

5. 短絡評価を使用した条件付きレンダリング

短絡評価を使用して条件付きレンダリングを簡素化します。これにより、JSX がより簡潔で読みやすくなります。

const ConditionalRender = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
      {!isLoggedIn && <p>Please log in.</p>}
    </div>
  );
};

export default ConditionalRender;

6. React.lazy を使用したコード分割

コード分割は、オンデマンドでロードできる複数のパッケージにコードを分割することで、アプリケーションの初期ロード時間を短縮します。

import React, { Suspense, lazy } from 'react';

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

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

export default App;

7. エラー境界を使用してエレガントなエラー処理を行う

エラー境界は、子コンポーネント ツリー内の任意の場所で JavaScript エラーをキャッチし、それらのエラーをログに記録し、クラッシュしたコンポーネント ツリーの代わりに代替 UI を表示できます。

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error, errorInfo) {
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1 id="Something-went-wrong">Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

8. React.Fragment を使用して要素をグループ化する

React.Fragment を使用すると、DOM に追加のノードを追加せずに、子要素のリストをグループ化できます。これは、コンポーネントから複数の要素を返す必要がある場合に特に便利です。

const List = () => {
  return (
    <React.Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>
  );
};

export default List;

9. コード再利用のための高次コンポーネント (HOC)

高次コンポーネント (HOC) は、コンポーネント ロジックを再利用するための React のパターンです。 HOC は、コンポーネントを取得して新しいコンポーネントを返す関数です。

const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withLogger;

10. グローバルな状態管理に React.Context を使用する

React.Context は、各レイヤーでプロップを手動で渡すことなく、コンポーネント ツリーを通じてデータを渡す方法を提供します。これは、グローバル状態を管理するのに役立ちます。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

11. React.PureComponent を使用してパフォーマンスを最適化します

React.PureComponent は React.Component に似ていますが、浅い props と状態比較を使用して shouldComponentUpdate を実装します。これにより、不必要な再レンダリングが減り、パフォーマンスが向上します。

import React from 'react';

const MemoizedComponent = React.memo(({ value }) => {
  console.log('Rendering...');
  return <div>{value}</div>;
});

export default MemoizedComponent;

結論

React.js は、開発者が効率的で保守しやすいアプリケーションを構築できるよう、幅広い機能とベスト プラクティスを提供する強力なライブラリです。これら 11 のヒントを活用することで、開発プロセスを合理化し、パフォーマンスを向上させ、よりクリーンで再利用可能なコードを作成できます。 React を始めたばかりの場合でも、スキルの向上を目指している場合でも、これらのヒントは、より熟練した React 開発者になるのに役立ちます。

コーディングを楽しんでください!

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