react useEffect 用法

当你在react.js中想要在客户端执行操作时，你可以使用useEffect钩子。这个钩子用于处理副作用，常常用于在组件挂载、更新或卸载时执行一些操作。

下面是一个在react.js组件中使用useEffect的基本例子：

import { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    // 在组件挂载时执行的代码，类似于class组件中的componentDidMount
    console.log('组件已挂载');

    // 在组件卸载时执行的代码，类似于class组件中的componentWillUnmount
    return () => {
      console.log('组件已卸载');
    };
  }, []); // 空的依赖数组表示这个effect只会在组件挂载时执行，类似于componentDidMount

  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  );
};

export default YourComponent;

在这个例子中，useEffect内部的代码将在组件挂载时运行，而清理函数（从useEffect返回的函数）将在组件卸载时运行。空的依赖数组 [] 确保该效果只运行一次，类似于 componentDidMount。

请注意，如果在依赖数组中有变量，该effect将在这些依赖项发生变化时运行。例如：

useEffect(() => {
  // 当someDependency变化时执行的代码
  console.log('someDependency发生了变化');
}, [someDependency]);

确保将 someDependency 替换为实际要观察变化的变量或状态。

需要注意的是，由于react.js具有特定的生命周期方法，因为它支持服务器端渲染，了解这些方法在处理时可能会有所帮助。