アーキテクト レベルの開発者として、アプリケーションの堅牢性、保守性、拡張性を確保する責任があります。これらの目標を達成するには、React Hooks とライフサイクルメソッドを習得することが不可欠です。この記事では、必須のフック、カスタム フック、および useReducer による複雑な状態の管理や useMemo と useCallback によるパフォーマンスの最適化などの高度なフック パターンについて説明します。
React 16.8 で導入された React Hook により、機能コンポーネントが状態やその他の React 機能を使用できるようになります。フックは、コンポーネント ロジックを処理するための機能的かつモジュール式のアプローチを提供し、コードベースをよりクリーンで保守しやすくします。
useState は、機能コンポーネントに状態を追加できるようにするフックです。
例:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
export default Counter;
この例では、useState はカウント状態変数を 0 に初期化します。setCount 関数は、ボタンがクリックされたときに状態を更新します。
useEffect は、データの取得、DOM との直接対話、サブスクリプションの設定など、機能コンポーネントで副作用を実行できるようにするフックです。これは、クラス コンポーネント (componentDidMount、componentDidUpdate、componentWillUnmount) のいくつかのライフサイクル メソッドの機能を組み合わせたものです。
例:
import React, { useState, useEffect } 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...'}
この例では、useEffect はコンポーネントのマウント時に API からデータを取得します。
useContext は、特定のコンテキストのコンテキスト値にアクセスできるようにするフックです。
例:
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <div>The current theme is {theme}</div>;
};
export default ThemedComponent;
この例では、useContext は ThemeContext の現在の値にアクセスします。
useReducer は、機能コンポーネント内の複雑な状態ロジックを管理できるようにするフックです。これは useState の代替であり、状態ロジックに複数のサブ値が含まれる場合、または次の状態が前の状態に依存する場合に特に便利です。
例:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;
この例では、useReducer はリデューサー関数を使用してカウント状態を管理します。
カスタム フックを使用すると、複数のコンポーネント間でステートフル ロジックを再利用できます。カスタムフックは、組み込みフックを使用する機能です。
例:
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data));
}, [url]);
return data;
};
const DataFetcher = ({ url }) => {
const data = useFetch(url);
return (
<div>
{data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)} : 'Loading...'}
この例では、useFetch は指定された URL からデータをフェッチするカスタム フックです。
複数のサブ値を含む複雑な状態ロジックを扱う場合、または次の状態が前の状態に依存する場合、useState より useReducer の方が適切な場合があります。
例:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;
この例では、useReducer はリデューサー関数を使用してカウント状態を管理します。
useMemo は計算された値をメモ化し、依存関係の 1 つが変更された場合にのみ再計算するフックです。レンダリングごとにコストのかかる計算を防止することで、パフォーマンスの最適化に役立ちます。
例:
import React, { useState, useMemo } from 'react';
const ExpensiveCalculation = ({ number }) => {
const computeFactorial = (n) => {
console.log('Computing factorial...');
return n <= 1 ? 1 : n * computeFactorial(n - 1);
};
const factorial = useMemo(() => computeFactorial(number), [number]);
return <div>Factorial of {number} is {factorial}</div>;
};
const App = () => {
const [number, setNumber] = useState(5);
return (
<div>
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value, 10))}
/>
<ExpensiveCalculation number={number} />
</div>
);
};
export default App;
この例では、useMemo により、数値が変更された場合にのみ階乗計算が再計算されることが保証されます。
useCallback は関数をメモ化するフックで、依存関係のいずれかが変更されない限り、レンダリングごとに関数が再作成されるのを防ぎます。これは、参照の等価性に依存する子コンポーネントに安定した関数を渡すのに役立ちます。
例:
import React, { useState, useCallback } from 'react';
const Button = React.memo(({ onClick, children }) => {
console.log(`Rendering button - ${children}`);
return <button onClick={onClick}>{children}</button>;
});
const App = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount((c) => c + 1), []);
return (
<div>
<Button onClick={increment}>Increment</Button>
<p>Count: {count}</p>
</div>
);
};
export default App;
この例では、useCallback により、依存関係が変更された場合にのみインクリメント関数が再作成され、Button コンポーネントの不必要な再レンダリングが防止されます。
React フックとライフサイクル手法をマスターすることは、堅牢で保守可能、スケーラブルなアプリケーションを構築するために不可欠です。 useState、useEffect、useContext、useReducer などのフック、およびカスタム フックや useMemo や useCallback によるパフォーマンスの最適化などの高度なパターンを理解して利用することで、効率的でスケーラブルな React アプリケーションを作成できます。アーキテクト レベルの開発者として、これらのスキルを身につけることで、高品質な React アプリケーションの開発を設計および指導する能力が大幅に向上し、開発プロセス全体を通じてベスト プラクティスと高い基準が確実に維持されるようになります。
以上がアーキテクト レベル: React のライフサイクル メソッドとフックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
