React Docs の最近のレビューから得た重要なポイント

このブログはもともと Medium に投稿されたものです

React 愛好家の皆さん、こんにちは!私は最近 React ドキュメントを詳しく調べたので、学んだことを皆さんと共有したいと思います。これは、React で強固な基盤を構築したい人向けの簡潔で最小限のガイドです。簡単な説明とコード スニペットで中心となる概念を詳しく見てみましょう。

少し長い話になりますが、React の中心となる概念をすべて一度に理解してください。さらに前進するには、これらの概念を要約して再検討することが有益であることがわかります。

目次

• React で考える
• コンポーネントと JSX
• 小道具
• 条件付きレンダリング
• レンダリングリスト
• 純粋なコンポーネント
• UI ツリー
• 対話性とイベント ハンドラー
• 状態
• 制御されたコンポーネント
• 制御されていないコンポーネント
• 参照
• デフォルトの動作の防止
• イベントの伝播
• 複雑な状態の管理
• コンテキスト
• 副作用
• useEffect のベスト プラクティス
• React のルール
• カスタムフック
• フックのルール

React で考える

React は、UI を再利用可能なコンポーネントに分割することです。 React アプリを構築するときは、次のことから始めます:

1. UI をコンポーネント階層に分割する
2. インタラクティブ性のない静的バージョンの構築
3. UI 状態の最小限の表現を特定する
4. あなたの州がどこに住むべきかを決定する
5. 逆データ フローの追加

参考: https://react.dev/learn/ Thinking-in-react

コンポーネントとJSX

コンポーネントは React アプリケーションの構成要素です。関数ベースまたはクラスベースにすることができます (時代遅れなのでお勧めしません)。 JSX は、JavaScript で HTML のようなコードを記述できるようにする構文拡張機能です。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

参考文献:

• コンポーネント: https://react.dev/learn/your-first-component
• JSX: https://react.dev/learn/writing-markup-with-jsx

小道具

Props は、親コンポーネントから子コンポーネントにデータを渡す方法です。これらは読み取り専用であり、コンポーネントを純粋に保つのに役立ちます。

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

参考: https://react.dev/learn/passing-props-to-a-component

条件付きレンダリング

React を使用すると、特定の条件に基づいてコンポーネントまたは要素を条件付きでレンダリングできます。

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

参考: https://react.dev/learn/conditional-rendering

レンダリングリスト

React で要素のリストをレンダリングするには、map() 関数を使用します。各アイテムに一意のキー プロップを追加することを忘れないでください。

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

参考: https://react.dev/learn/rendering-lists

純粋なコンポーネント

純粋なコンポーネントは、同じプロパティと状態に対して常に同じ出力をレンダリングします。予測可能でテストが簡単です。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

参考: https://react.dev/learn/keeper-components-pure

UIツリー

React は、仮想 DOM と呼ばれる UI の内部表現を構築し、維持します。これにより、React は実際の DOM の変更された部分のみを効率的に更新できます。

参考: https://react.dev/learn/ Understanding-your-ui-as-a-tree

インタラクティブ性とイベント ハンドラー

React は合成イベントを使用して、異なるブラウザ間で一貫してユーザー インタラクションを処理します。

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

参考: https://react.dev/learn/responding-to-events

州

状態は、コンポーネント内で時間の経過とともに変化するデータに使用されます。 useState フックを使用して、機能コンポーネントに状態を追加します。

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

参考: https://react.dev/learn/state-a-components-memory

管理対象コンポーネント

制御対象コンポーネントの状態は React によって制御されます。

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

制御されていないコンポーネント

制御されていないコンポーネントは、DOM 上で状態を直接管理します。

function PureComponent(props) {
  return <div>{props.value}</div>;
}

参照

Ref は、render メソッドで作成された DOM ノードまたは React 要素にアクセスする方法を提供します。

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

デフォルト動作の防止

特定のイベントに対するブラウザのデフォルトの動作を停止するには、preventDefault() を使用します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

イベントの伝播

React イベントはネイティブ DOM イベントと同様に伝播します。 stopPropagation() を使用すると、イベントのバブリングを防ぐことができます。

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

複雑な状態の管理

複雑な状態ロジックには useReducer フック、または Redux や Zustand などの状態管理ライブラリの使用を検討してください。

function UncontrolledInput() {
  return <input defaultValue="Hello" />;
}

コンテクスト

コンテキストは、すべてのレベルで props を手動で渡すことなく、コンポーネント ツリーを通じてデータを渡す方法を提供します。

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

参考: https://react.dev/learn/passing-data-deeply-with-context

副作用

副作用とは、データのフェッチや DOM 操作など、実行される関数の範囲外に影響を与える操作です。 useEffect フックを使用して副作用を管理します。

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

useEffect のベスト プラクティス

1. エフェクトが依存するすべての変数を依存関係配列に常に含めてください。
2. エフェクトの依存関係を慎重に考慮して、無限ループを回避してください。
3. useEffect の return 関数で副作用をクリーンアップします。

function Parent() {
  return (
    <div onClick={() => console.log('Parent clicked')}>
      <Child />
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation();
    console.log('Child clicked');
  };

  return <button onClick={handleClick}>Click me</button>;
}

参考文献:

• useEffect は必要ないかもしれません: https://react.dev/learn/you-might-not-need-an-effect
• エフェクトとの同期: https://react.dev/learn/synchronizing-with-Effects
• リアクティブ エフェクトのライフサイクル: https://react.dev/learn/lifecycle-of-reactive-Effects

React のルール

1. コンポーネント名は常に大文字で始めてください。
2. 自己終了タグを含むすべてのタグを閉じます。
3. プロパティを直接変更しないでください。
4. 可能な限りコンポーネントを純粋に保ちます。

参考: https://react.dev/reference/rules

カスタムフック

カスタム フックを使用すると、コンポーネント ロジックを再利用可能な関数に抽出できます。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

フックのルール

1. コンポーネントの最上位レベルでのみフックを呼び出します。
2. React 関数コンポーネントまたはカスタム フックからのみフックを呼び出します。
3. これらのルールを適用するには、eslint-plugin-react-hooks を使用します。

参考: https://react.dev/reference/rules/rules-of-hooks

これで React の旅は終わりです!覚えておいてください、学ぶための最良の方法は実践することです。プロジェクトの構築を開始し、これらの概念を試してください。さらに詳細が必要な場合は、遠慮せずに React ドキュメントを参照してください。コーディングを楽しんでください!

以上がReact Docs の最近のレビューから得た重要なポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。