React Hooks は、機能コンポーネントで状態やその他の React 機能を使用できるようにする関数です。フックが登場する前は、ステートフル ロジックはクラス コンポーネントでのみ使用できました。フックは、状態、ライフサイクル メソッド、コンテキストなど、すでに知っている React の概念へのより直接的な API を提供します。
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 開発には、React Hooks を理解することが不可欠です。これにより、機能コンポーネントでよりクリーンで保守しやすいコードを作成できるようになります。 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)
