ホームページ >ウェブフロントエンド >jsチュートリアル >React の useEffect() フックを理解する
React はバージョン 16.8 でフックを導入しました。最も一般的に使用されるフックの 1 つは useEffect() です。 useEffect() フックを使用すると、データの取得、DOM の更新、サブスクリプションの設定などの関数コンポーネントでの副作用を実行できます。
useEffect() の仕組み
useEffect() フックは 2 つの引数を受け入れます:
基本構文:
useEffect(() => { // Your side effect code here }, [dependencies]);
例 1: データの取得
import React, { useEffect, useState } from "react"; function DataFetchingComponent() { const [data, setData] = useState([]); const [error, setError] = useState(null); useEffect(() => { // Fetch data from an API fetch("https://jsonplaceholder.typicode.com/users") .then((response) => response.json()) .then((json) => setData(json)) .catch((err) => setError("Error fetching data")); }, []); return ( <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "20px" }}> <h1 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}> Users Data </h1> <h2 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}> Understanding the useEffect() Hook in React By Sudhanshu Gaikwad </h2> {error ? ( <p style={{ color: "red", textAlign: "center" }}>{error}</p> ) : ( <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: "20px", }} > <thead style={{ backgroundColor: "black", color: "white" }}> <tr> <th style={{ padding: "10px", textAlign: "left" }}>ID</th> <th style={{ padding: "10px", textAlign: "left" }}>Name</th> <th style={{ padding: "10px", textAlign: "left" }}>Username</th> <th style={{ padding: "10px", textAlign: "left" }}>Email</th> </tr> </thead> <tbody> {data.map((user) => ( <tr key={user.id} style={{ backgroundColor: user.id % 2 === 0 ? "#f2f2f2" : "white", borderBottom: "1px solid #ddd", }} > <td style={{ padding: "10px" }}>{user.id}</td> <td style={{ padding: "10px" }}>{user.name}</td> <td style={{ padding: "10px" }}>{user.username}</td> <td style={{ padding: "10px" }}>{user.email}</td> </tr> ))} </tbody> </table> )} </div> ); } export default DataFetchingComponent;
出力
例 2: タイマーの設定
import React, { useState, useEffect } from "react"; function TimerComponent() { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((prevCount) => prevCount + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", backgroundColor: "#f0f4f8" }}> <div style={{ backgroundColor: "#fff", borderRadius: "10px", padding: "30px 50px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", textAlign: "center" }}> <h1 style={{ fontSize: "3rem", fontFamily: "Roboto, sans-serif", color: "#333", margin: "0" }}>{count} seconds</h1> <p style={{ marginTop: "15px", fontSize: "1.2rem", color: "#666" }}>Timer running with useEffect hook</p> </div> </div> ); } export default TimerComponent;
出力
要約すると:
以上がReact の useEffect() フックを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。