react 实现监听器功能

在 React 中，你可以使用 useState 和 useEffect Hooks 来实现对值变动的监听。当值发生变化时，useEffect 会被触发，从而执行你定义的方法。以下是一个简单的示例：

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

function MyComponent() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    console.log('Value changed:', value);
  }, [value]);

  const handleClick = () => {
    setValue(value + 1);
  };

  return (
    <>
      <button onClick={handleClick}>Add 1</button>
      <p>Value: {value}</p>
    </>
  );
}

在这个例子中，我们使用 useState 定义了一个名为 value 的状态变量，并使用 useEffect 监听 value 的变化。当 value 发生变化时，useEffect 会被触发，从而执行 console.log 语句。这样，每次点击按钮时，value 的值会改变，从而触发 useEffect，打印出新的值[3]。

Citations:

• [1] https://juejin.cn/s/react%E7%9B%91%E5%90%AC%E5%8F%98%E9%87%8F%E5%8F%98%E5%8C%96
• [2] https://blog.csdn.net/weixin_43294560/article/details/106583597
• [3] https://juejin.cn/s/react%E6%80%8E%E4%B9%88%E7%9B%91%E5%90%AC%E6%9F%90%E4%B8%80%E4%B8%AA%E5%80%BC%E7%9A%84%E5%8F%98%E5%8C%96
• [4] https://blog.csdn.net/Anony_me/article/details/128956724
• [5] https://blog.51cto.com/u_13977638/5156285
• [6] https://jb51.net/article/258500.htm
• [7] https://www.volcengine.com/theme/3503561-Y-7-1
• [8] https://zhuanlan.zhihu.com/p/373711190?utm_id=0