反応の主なコンセプト ||反応する

React.js では、コンポーネントの管理、ライフサイクル イベントの処理、フックの操作に使用できるメソッドがいくつかあります。以下に、最も重要なメソッドをさまざまなセクションに分類しました。

1. コンポーネントのライフサイクル メソッド (クラス コンポーネント)

React クラス コンポーネント には、コンポーネントのライフ サイクルの特定の時点でコードを実行するためにオーバーライドできるライフサイクル メソッドがいくつかあります。

マウント段階 (コンポーネントの初期化)

• コンストラクター()

  • コンポーネントがマウントされる前に呼び出されます。
  • 状態の初期化またはイベント ハンドラーのバインドに役立ちます。

• static getDerivedStateFromProps(props, state)

  • 最初のマウント時とその後の更新時の両方で、レンダリング前に呼び出されます。
  • プロパティに基づいて状態を更新できるようにします。

• render()

  • クラスコンポーネントで唯一必要なメソッドです。
  • DOM にレンダリングされる React 要素を返す必要があります。

• componentDidMount()

  • コンポーネントがマウントされた直後に呼び出されます。
  • データの取得、サブスクリプションの設定、API 呼び出しの実行に一般的に使用されます。

更新フェーズ (プロパティまたは状態の変更による再レンダリング)

• static getDerivedStateFromProps(props, state)

  • (更新中にも呼び出されます) props に基づいて状態を更新するために使用されます。

• shouldComponentUpdate(nextProps, nextState)

  • 再レンダリングが必要かどうかを決定します。
  • 不必要なレンダリングを防止することでパフォーマンスを最適化するために使用できます。

• render()

  • (更新中に再度呼び出されます)

• getSnapshotBeforeUpdate(prevProps, prevState)

  • 仮想 DOM からの変更が実際の DOM に適用される直前に呼び出されます。
  • 更新前に情報 (スクロール位置など) を取得するのに役立ちます。

• componentDidUpdate(prevProps, prevState, スナップショット)

  • 更新が行われた直後に呼び出されます。
  • コンポーネントが更新された後に操作を実行する場合に便利です (プロパティの変更に基づいて API 呼び出しを行うなど)。

アンマウント段階 (コンポーネントを削除する前のクリーンアップ)

• componentWillUnmount()
  • コンポーネントがアンマウントされて破棄される直前に呼び出されます。
  • サブスクリプション、タイマー、またはイベント リスナーをクリーンアップするのに役立ちます。

エラー処理

• componentDidCatch(エラー、情報)
  • レンダリング中、ライフサイクル メソッド、または子コンポーネントのコンストラクターでエラーが発生した場合に呼び出されます。
  • エラーのログ記録やフォールバック UI の表示に役立ちます。

2. React フック (関数コンポーネント)

フックは React 16.8 に新しく追加されたもので、クラスを作成せずに状態やその他の React 機能を使用できるようになります。

基本的なフック

• useState(初期状態)
  • 機能コンポーネントに状態を追加できます。
  • 状態変数とそれを更新する関数を返します。

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

• useEffect(コールバック、依存関係)
  • componentDidMount、componentDidUpdate、componentWillUnmount を組み合わせたものと同様です。
  • データのフェッチ、サブスクリプション、DOM の手動変更などの副作用に使用されます。

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• useContext(コンテキスト)
  • Consumer コンポーネントをネストせずに React コンテキストをサブスクライブできます。

  const value = useContext(MyContext);

追加のフック

• useReducer(reducer、initialState)
  • より複雑な状態ロジックを管理するための useState の代替手段。

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback(コールバック、依存関係)
  • コールバック関数のメモ化されたバージョンを返します。これは、参照の等価性に依存する子コンポーネントを最適化するのに役立ちます。

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

• useMemo(作成、依存関係)
  • 高価な計算を最適化するために使用される、メモ化された値を返します。

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(initialValue)
  • レンダリング間で持続する、変更可能な ref オブジェクトを返します。
  • DOM 要素にアクセスしたり、変更可能な値を保存したりする場合に便利です。

  const inputRef = useRef();

• useImperativeHandle(ref、createHandle、依存関係)
  • forwardRef で ref を使用するときに公開されるインスタンス値をカスタマイズします。

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

• useLayoutEffect(コールバック、依存関係)

  • useEffect に似ていますが、すべての DOM 変更後に同期的に起動されます。
  • DOM からレイアウトを読み取り、同期的に再レン​​ダリングする場合に便利です。

• useDebugValue(値)

  • React DevTools でカスタム フックのラベルを表示するために使用できます。

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

3. イベント処理メソッド

React は、通常の DOM イベント処理と同様のイベント処理メソッドを提供しますが、いくつかの違いがあります。

• クリック
• 変更中
• 送信時
• オンフォーカス
• オンブラー
• キーを押すと

例:

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. その他の React メソッド

役立つと思われる追加の方法を次に示します:

• React.createRef()

  • クラスコンポーネントで参照を作成するために使用されます。

• React.forwardRef()

  • 子コンポーネントに参照を渡します。

• React.memo(コンポーネント)

  • プロパティが変更されていない場合の再レンダリングを防ぐ高次コンポーネント。

• React.lazy()

  • コード分割と遅延読み込みコンポーネントに使用されます。

• リアクト・サスペンス

  • React.lazy() と組み合わせて使用​​して、遅延コンポーネントのロード中にフォールバックを表示します。

5. React Router メソッド (ルーティング用)

• useNavigate() (React Router v6)
• useParams()
• useLocation()
• useMatch()

例:

  const value = useContext(MyContext);

6. プロパティのタイプとデフォルトのプロパティ

• propTypes

  • コンポーネントに渡される props のタイプを検証するために使用されます。

• defaultProps

  • 小道具のデフォルト値を設定するために使用されます。

例:

  const [state, dispatch] = useReducer(reducer, initialState);

結論

• クラス コンポーネント はより伝統的で、ライフサイクル メソッドを使用します。
• 機能コンポーネントはフックを活用しており、そのシンプルさとパフォーマンス上の利点により、現代の React 開発では一般的に好まれています。

コンポーネントのライフサイクルをきめ細かく制御する必要がある場合はクラス コンポーネントを使用し、よりシンプルでクリーンな API が必要な場合はフックを使用します。

以上が反応の主なコンセプト ||反応するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。