React componentDidMount 触发时机

Question

The componentDidMount() hook runs after the component output has been rendered to the DOM.

根据官方Doc说"组件输出到 DOM 后会执行 componentDidMount() 钩子", 我打了两个log输出, 结果如下:

>>>render
>>>componentDidMount
>>>render
>>>render
>>>render
>>>render 
# 等等

问:

1. componentDidMount的准确回调时机是什么呢? 由setState()引起的render和首次render的行为是不是有差别?

2. 如果把 setInterval(() => this.tick(),1000); 移到render里, 会发生"跳数"的效果.

求前辈指点~

Code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


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

  componentDidMount() {
    this.log = loglog("componentDidMount");
    this.timer = setInterval(
      () => this.tick(),
      1000
    );
  }

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

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

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

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

function loglog(sth) {
  console.log('>>>' + sth);
}

Answer 1

回答你的问题1：首次render是在componentWillMount之后，可以这样描述componentWillMount-->render-->componentDidMount,再来说setState()，setState()是改变组件中的state，组件中的state一旦改变，组件就会自动更新，它不是生命周期，还有一点楼上说过了就是componentDidMount只会组件挂载完成后，加载一次。
回答你的问题2：react中不可以在render里面改变state的值，你在render中调用了tick()函数，里面存在setstate()方法，这是不对的。

Answer 2

这个生命周期只会执行一次，就是在第一次render后，后续render执行后会执行componentDidUpdate

Answer 3

第一题 楼上正解 生命周期只会执行一次，就是在第一次render后，后续render执行后会执行componentDidUpdate。

第二题：因为tick里面调用了setstate会重新render,而render函数又调用了tick函数。这是死循环啊

Answer 4

https://segmentfault.com/a/11... 去看看这篇文章吧

Answer 5

didmount 执行一次 如果执行多次 说明组建被卸载之后又挂载了。
查看一下是否更改了props的值，包括父级，父级的父级。
前两天刚好遇到这个问题，didmount 执行多次，后面发现是这个原因。