React:componentDidMount中的setState不会导致无限循环

Question

我是ReactJS的新手.当我正在阅读ReactJS蓝图书时,作者指定了这一点

"但是请注意永远不要在这里运行setState,因为这将触发无限的更新循环."

所以,我创建了一个下面简单的组件,但我没有看到任何这样的无限循环发生.

'use strict';
import React from 'react';
import { render } from 'react-dom';
const App = React.createClass({
    displayName : "SG",
    getDefaultProps() {
        return {
            age : "24"
        }
    },
    getInitialState() {
        return {
            date : ""
        }
    },
    componentDidMount() {
        debugger;
        var d = new Date();
        this.setState({date: d.getMilliseconds().toString()});
    },
    render() {
        return (
            <section>
                <h1>Demo App</h1>
                <p>Name : {this.props.name}</p>
                <p>Age : {this.props.age}</p>
                <p>date : {this.state.date}</p>
            </section>
        );
    }
});
render (<App name='Gowtham S'/>, document.getElementById('container'));

我在componentDidMount中保留了调试器,但它只打了一次.我的代码有什么问题可以帮到我吗？

谢谢

Answer 1

他在谈论componentDidUpdate,而不是componentDidMount.

当你setState进入时componentDidUpdate,后者再次被调用,因为组件应该更新,这导致无休止的递归.另一方面,componentDidMount仅在初始渲染时调用.