实例化介绍useeffect

在React.js中，`useEffect`是Hook之一，用于处理副作用，它通常与组件的渲染关联起来。当组件挂载、更新（props或state改变）后，`useEffect`会被调用。它接受两个函数作为参数：一个主函数（即你想执行的操作），另一个是依赖数组（dependencies array），用来指定哪些数据变化时需要再次执行该函数。

例如，如果你想要在每次渲染后执行一些副作用操作，如获取数据、设置定时器、订阅事件等，可以这样做：

import { useState, useEffect } from 'react';

function MyComponent({ data }) {
  const [value, setValue] = useState(data); // 存储数据

  useEffect(() => {
    // 主函数，会在组件挂载和data更新时执行
    console.log('Data has been updated:', value);

    // 清理函数，当组件卸载时会被执行
    return () => {
      clearInterval(timerId);
    };
  }, [data]); // 仅当"data"发生变化时才会重新运行此effect

  // ...
}

在这个例子中，`useEffect`的主要目的是监听"data"的变化，并执行相应的日志记录。如果"data"没有变化，`useEffect`将不会执行，这就体现了“惰性”原则，避免了不必要的计算。