React函数组件带依赖项的useEffect Hook在类组件中的等价生命周期方法咨询

Great question! Let’s break this down clearly—class components don’t have a single lifecycle method that maps exactly to useEffect with a dependency array, but you can replicate the exact behavior using a combination of two standard lifecycle methods.

How useEffect Works in Your Function Component #

First, let’s recap your example:

const [show, setShow] = React.useState(false);
React.useEffect(() => {
  console.log("Do something");
}, [show]);

This useEffect runs once when the component first mounts and every time the show state variable changes.

The Class Component Equivalent #

To get this exact behavior in a class component, you’ll use:

1. componentDidMount: Handles the initial mount execution (matches the first run of useEffect).
2. componentDidUpdate: Checks if the dependency (show state) has changed since the last render, and runs the logic if it has.

Here’s the direct equivalent code for your example:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  // Runs once on component mount (like useEffect's first execution)
  componentDidMount() {
    this.doSomething();
  }

  // Runs after every update—we check if "show" changed here
  componentDidUpdate(prevProps, prevState) {
    // Compare previous state to current state to detect changes
    if (prevState.show !== this.state.show) {
      this.doSomething();
    }
  }

  // Extract the reusable logic into a helper method (cleaner!)
  doSomething() {
    console.log("Do something");
  }

  render() {
    return (
      <button onClick={() => this.setState(prev => ({ show: !prev.show }))}>
        Toggle Show
      </button>
    );
  }
}

Handling Prop Dependencies (Instead of State) #

If your dependency was a prop instead of state, you’d adjust the componentDidUpdate check to compare prevProps and this.props:

componentDidUpdate(prevProps) {
  if (prevProps.someProp !== this.props.someProp) {
    this.doSomething();
  }
}

Adding Cleanup Logic (Like useEffect’s Return Function) #

If your useEffect includes a cleanup function (e.g., clearing intervals, unsubscribing from events), you can use the componentWillUnmount lifecycle method in class components to handle this:

componentDidMount() {
  // Set up a subscription/interval
  this.intervalId = setInterval(() => console.log("Tick"), 1000);
  this.doSomething();
}

componentDidUpdate(prevState) {
  if (prevState.show !== this.state.show) {
    this.doSomething();
  }
}

// Clean up when the component unmounts
componentWillUnmount() {
  clearInterval(this.intervalId);
}

Is There a Single Lifecycle Method for This? #

Nope—there’s no one-to-one replacement for useEffect with dependencies in class components. The combination of componentDidMount and componentDidUpdate is the standard, accepted way to replicate this behavior.

内容的提问来源于stack exchange，提问作者Mehdi Faraji