【React】useState和useEffect

2 年 ago

新, 韵

1 minute

React Hooks的使用方法：useState和useEffect

React Hooks是在React 16.8引入的，它允许在函数组件中使用状态和生命周期方法。useState用于管理状态，useEffect用作生命周期方法的替代。下面将介绍它们的基本用法。

1. 使用 useState 的基本方法

使用useState可以在函数组件中管理状态。它返回状态变量及其更新函数，并且组件的重新渲染会由这些变量触发。

import React, { useState } from 'react';

const Counter = () => {
  // 初期状態と更新関数を取得
  const [count, setCount] = useState(0);
  // const [count, setCount] = useState<number>(0); // typescriptのとき

  const increment = () => {
    // 状態の更新
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

useState接受状态的初始值作为参数，并返回一个用于更新当前状态及其状态的函数。

2. useEffect的基本使用方法

useEffect 在组件挂载、更新或卸载时被用来执行副作用的代码。

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  // useEffectを使用してカウンターが更新されるたびに処理を実行
  useEffect(() => {
    // 1秒ごとにカウントアップする処理
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000); // 1000msのインターバル

    // コンポーネントがアンマウントされたときにクリーンアップ
    return () => clearInterval(intervalId);
  }, []); // 依存配列が空なので、コンポーネントがマウントされたときに1度だけ実行

  return (
    <div>
      <p>Elapsed Time: {seconds} seconds</p>
    </div>
  );
};

export default Timer;

通过将依赖数组作为useEffect的第二个参数传递，您可以控制只有在依赖项更改时才执行useEffect。如果传递一个空的数组，则只会在挂载时执行一次。

当数组不为空时的示例

import React, { useState, useEffect } from 'react';

const ExampleComponent = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  useEffect(() => {
    // countの値が変更されたときに実行
    console.log(`Count is ${count}`);
  }, [count]); // countが変更されたときのみ実行

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;

通過這樣的學習，你現在對於useState和useEffect的基本使用方式有了充分的理解。這些Hooks是React組件更簡潔和高效構建的強大工具。