reactjs - 在反应生命周期挂钩中用 setTimeout 替换 setInterval

Question

下面是 react 生命周期钩子的官方示例。下面这种情况，如果我稍微改一下，把setInterval改成setTimeout，放到render()里面，这样setTimeout就会setState，然后调用render()，然后setTimeout就改成setState。也可以达到同样的效果，那么为什么在这种情况下需要使用生命周期钩子，或者有什么好处呢？清理代码？为了减少内存消耗？?

官方原案

    class Clock extends React.Component {
          constructor(props) {
            super(props);
            this.state = {date: new Date()};
          }
          componentDidMount() {
            this.timerID = setInterval(
          this.setState({
              date: new Date()
            }), 1000);
          }
          render() {
            return (
              <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
              </div>
            );
          }
        }

我的修改

    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }
     
      render() {
        this.timerID = setTimeout(
        this.setState({
          date: new Date()
        }),1000);
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

标签： reactjs