react class写法如何添加 useEffect

在 React Class 组件中，可以使用 `componentDidMount` 和 `componentDidUpdate` 生命周期方法来模拟 `useEffect` 的效果。

1. 在 `componentDidMount` 生命周期方法中，可以执行组件首次渲染后的操作，类似于 `useEffect` 的第一个参数。

2. 在 `componentDidUpdate` 生命周期方法中，可以执行在组件更新后的操作，类似于 `useEffect` 的第二个参数。

下面是一个示例代码，展示了如何在 React Class 组件中使用 `componentDidMount` 和 `componentDidUpdate` 来模拟 `useEffect`：

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    // 组件首次渲染后执行的操作，类似于 useEffect 的第一个参数
    console.log('Component mounted');
    
    // 在这里添加你的逻辑代码
  }

  componentDidUpdate(prevProps, prevState) {
    // 组件更新后执行的操作，类似于 useEffect 的第二个参数
    console.log('Component updated');
    
    // 在这里添加你的逻辑代码
  }

  render() {
    return <div>My Component</div>;
  }
}

export default MyComponent;

在上面的示例中，`componentDidMount` 方法在组件首次渲染后执行操作，而 `componentDidUpdate` 方法在组件更新后执行操作。你可以在这两个方法中添加你的逻辑代码。

注意：在使用 `componentDidUpdate` 方法时，需要注意避免无限循环更新。你可以使用条件语句来检查是否需要执行操作，以避免不必要的更新。

请记住，`componentDidMount` 和 `componentDidUpdate` 是 React Class 组件提供的生命周期方法，与函数组件中的 `useEffect` 不完全相同。如果你使用的是函数组件，可以直接使用 `useEffect` 钩子。