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

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

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

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

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

例:

// 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. コンポーネントを分解する
   大きなコンポーネントはメンテナンスや再利用が困難です。それぞれが単一のタスクを処理する、小??規(guī)模で焦點を絞ったコンポーネントを作成することを目指します。コンポーネントが複數(shù)のことを?qū)g行している場合は、それをより小さなサブコンポーネントに分割することを検討してください。

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 から分離する コードをクリーンでテストしやすい狀態(tài)に保つには、ロジックをプレゼンテーションから分離します。たとえば、カスタム フックを使用してロジックを処理し、狀態(tài)を管理し、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. 意味のある一貫した名前を使用する 一貫した命名規(guī)則により、コードが読みやすくなります。関數(shù)と変數(shù)にはキャメルケースを使用し、コンポーネント名にはパスカルケースを使用し、すべてのプロパティと狀態(tài)変數(shù)にはわかりやすい名前を使用します。

例:

// 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 は狀態(tài)をグローバルに管理するための強(qiáng)力なツールですが、使いすぎるとコードが複雑になり、デバッグが困難になる可能性があります。使用は控えめにして、大規(guī)模なアプリケーションには Redux や Zustand などの狀態(tài)管理ライブラリの使用を検討してください。

例:

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. 高価な機(jī)能とコンポーネントをメモする React は、親コンポーネントが再レンダリングされるたびにコンポーネントを再レンダリングします。不必要な再レンダリングを防ぐには、コンポーネントには React.memo を使用し、関數(shù)には useMemo/useCallback を使用します。

例:

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

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

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. コンポーネントをテストする テストは、コンポーネントが期待どおりに動作することを確認(rèn)し、バグを早期に発見するのに役立ちます。 Jest および React Testing Library を使用してコンポーネントの単體テストを作成し、テストをワークフローに統(tǒng)合します。

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

type GreetingProps = {
  name: string;
};

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

結(jié)論

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

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