reactでデータの変更を監視の方法

1年 ago
光, 明
1 minute

ReactではuseStateで状態を定義し、useEffectで状態の変化を監視できます。

まず、状態変数と状態を更新する関数を定義するためにuseStateを使用します、例えば、

import React, { useState } from 'react';

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

  // ...
}

ステート変数が変更されたとき useEffectフックを使って監視できます。useEffectはコールバック関数を受け取り、この関数はコンポーネントのレンダリング後に実行されます。コールバック関数の中で、ステート変数の値を取得し、監視することができます。

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

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

  useEffect(() => {
    // 在这里可以根据状态变量的值做一些处理
    console.log(`Count has changed to ${count}`);
  }, [count]); // 传入[count]作为第二个参数，表示只有count发生变化时才会执行回调函数

  // ...
}

count が変更された時に、useEffect のコールバック関数が実行される仕組みで、データの変化を監視する機能を実現します。

bannerAds