ReactJS のベスト プラクティス: クリーンで保守可能なコードの作成

ReactJS は、動的ユーザー インターフェイスを構築するための強力で人気のある JavaScript ライブラリです。ただし、アプリケーションが成長するにつれて、スケーラビリティ、効率性、読みやすさを維持するために、クリーンで組織化されたコードを維持することが不可欠になります。ここでは、クリーンで保守可能な React コードを作成するのに役立ついくつかのベスト プラクティスを紹介します。

1. プロジェクト構造を整理する 明確なフォルダー構造を確立すると、あなたとチームがファイルを簡単に見つけることができます。共通の構造は、各機能に独自のフォルダーがある「機能ベース」のアプローチに従います。

src/
├── components/
│   └── Button/
│       ├── Button.js
│       ├── Button.css
│       └── index.js
├── pages/
│   └── Home.js
└── App.js

コンポーネントを機能 (または責任) ごとに分離すると、コードベースがよりモジュール化され、成長に合わせてナビゲートしやすくなります。

1. 機能コンポーネントとフックを使用する React Hook は多くの場合、クラス コンポーネントを置き換え、このバインディングを回避することでコードを簡素化します。一般に、機能コンポーネントは短く、読みやすく、テストが容易です。

例:

// Instead of class component:
class MyComponent extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Use functional component with hooks:
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

1. コンポーネントを分解する
   大きなコンポーネントはメンテナンスや再利用が困難です。それぞれが単一のタスクを処理する、小​​規模で焦点を絞ったコンポーネントを作成することを目指します。コンポーネントが複数のことを実行している場合は、それをより小さなサブコンポーネントに分割することを検討してください。

2. PropType または TypeScript を使用する
   React の PropType または TypeScript の静的型付けは、型エラーを早期に検出するのに役立ちます。予期される prop タイプを定義すると、コンポーネントがより予測可能になり、エラーが発生しにくくなります。

PropType を使用した例:

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

TypeScript を使用した例:

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

1. コンポーネントのロジックを UI から分離する コードをクリーンでテストしやすい状態に保つには、ロジックをプレゼンテーションから分離します。たとえば、カスタム フックを使用してロジックを処理し、状態を管理し、UI を処理するコンポーネントにデータを props として渡します。

カスタムフックの例:

import { useState, useEffect } from 'react';

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

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

  return data;
}

// UI Component:
function DataDisplay({ url }) {
  const data = useFetchData(url);
  return <div>{data ? data.title : 'Loading...'}</div>;
}

1. 意味のある一貫した名前を使用する 一貫した命名規則により、コードが読みやすくなります。関数と変数にはキャメルケースを使用し、コンポーネント名にはパスカルケースを使用し、すべてのプロパティと状態変数にはわかりやすい名前を使用します。

例:

// Good:
const isLoggedIn = true;
const userProfile = { name: "John", age: 30 };

// Poor:
const x = true;
const obj = { name: "John", age: 30 };

1. Context API は慎重に使用してください React の Context API は状態をグローバルに管理するための強力なツールですが、使いすぎるとコードが複雑になり、デバッグが困難になる可能性があります。使用は控えめにして、大規模なアプリケーションには Redux や Zustand などの状態管理ライブラリの使用を検討してください。

例:

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

1. 高価な機能とコンポーネントをメモする React は、親コンポーネントが再レンダリングされるたびにコンポーネントを再レンダリングします。不必要な再レンダリングを防ぐには、コンポーネントには React.memo を使用し、関数には useMemo/useCallback を使用します。

例:

src/
├── components/
│   └── Button/
│       ├── Button.js
│       ├── Button.css
│       └── index.js
├── pages/
│   └── Home.js
└── App.js

1. CSS モジュールまたはスタイル付きコンポーネントを使用する CSS モジュール、スタイル付きコンポーネント、または同様のツールを使用して、グローバル スタイルを回避します。これらは、スタイルの範囲を個々のコンポーネントに設定するのに役立ち、スタイルの競合を減らし、読みやすさを向上させます。

CSS モジュールを使用した例:

// Instead of class component:
class MyComponent extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Use functional component with hooks:
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

スタイル付きコンポーネントの例:

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

1. コンポーネントをテストする テストは、コンポーネントが期待どおりに動作することを確認し、バグを早期に発見するのに役立ちます。 Jest および React Testing Library を使用してコンポーネントの単体テストを作成し、テストをワークフローに統合します。

React テスト ライブラリを使用した基本的な例:

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

結論

これらのベスト プラクティスに従うことで、クリーンでスケーラブルで保守が容易な React コードを作成できます。ファイルの整理、機能コンポーネントの使用、UI からのロジックの分離、およびコンポーネントのテストは、React アプリケーションをより効率的で楽しく作業できるようにするためのいくつかの方法にすぎません。これらのテクニックをプロジェクトに適用してコードの品質を向上させ、将来の開発をより迅速かつ楽しいものにしましょう。

以上がReactJS のベスト プラクティス: クリーンで保守可能なコードの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。