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

时间:2017-03-29 13:36:18

标签: javascript reactjs

我是ReactJS的新手。当我阅读ReactJS Blueprint书时,作者指定了

  

"但要注意永远不要在这里运行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中保留了调试器,但它只打了一次。我的代码有什么问题,任何人都可以帮助我吗?

由于

1 个答案:

答案 0 :(得分:12)

他在谈论的是componentDidUpdate,而不是componentDidMount

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