即使在状态更改后，如何使用 componentDidMount？

Question

我在学习 React 时遇到了这段代码：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

问题是即使在状态改变后，componentDidMount 是如何被调用的，也就是说，

componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }

在上面的代码 setInterval 被调用，它又调用改变状态的滴答函数。 但是状态改变后，组件重新渲染后，是不是又调用了componentDidMount？

Answer 1

componentDidMount 又被调用了吗？

不，它不会再被调用。 在组件渲染中，仅在第一次渲染时调用一次componentDidMount 。 如果您需要再次获取先前的值，则此componentDidUpdate有另一个生命周期方法。 就像是：

componentDidUpdate(prevProps, prevState){
    console.log(prevState);
}

Answer 2

不，你弄错了， componentDidMount在渲染后只被调用一次，它是tick函数，它tick被一次又一次地调用。 让我详细说明：

渲染后 ->

1. componentDidMount被调用。 在其中调用setInterval 。
2. setInterval在事件队列中排队，向this.timerID返回一个 id（一个数字），并且componentDidMount退出。
3. tick函数被推入堆栈并在一秒持续时间后执行。
4. 因为它是一个setInterval ，它在队列中并在一秒钟后再次被执行。
5. 遵循模式...

我知道您对如何一次又一次地调用tick线而不是componentDidMount感到困惑。 请参阅以下内容：

fuction parentFunction() {
  setInterval(() => {
    childFunction();
  }, 1000);
}

parentFunction();

在这种情况下， childFunction在setInterval （ parentFunction不是），因此只一次又一次地调用childFunction ，而不是parentFunction 。

希望能帮助到你 ：）

Answer 3

组件将在第一次渲染或卸载后或更改 key 属性时挂载。

因此，如果您有一个名为WillSometimesRender的组件，它将在之前渲染但现在未渲染时卸载。

如果您有一个名为KeyChange的组件，它将在使用不同的键呈现时卸载，然后重新安装（请参阅下面的代码）

 class KeyChange extends React.Component { componentDidMount() { console.log('key change got mounted'); } componentWillUnmount() { console.log('key change got unmounted'); } render() { return <div>key change</div>; } } class WillSometimesRender extends React.Component { componentDidMount() { console.log('will sometimes render got mounted'); } componentWillUnmount() { console.log('will sometimes render got unmounted'); } render() { return <div>will sometimes render</div>; } } const App = () => { const [key, setKey] = React.useState(1); return ( <div> <button onClick={() => setKey(key => key + 1)}> Change key </button> <KeyChange key={key} /> {key % 2 && <WillSometimesRender />} </div> ); }; ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>