哪个先被调用？构造函数或 componentDidMount 或 Render

Question

正如我在网上和官方文档中阅读的那样。顺序是 Constructor-> ComponentWillMount -> Render -> ComponentDidMount 等。

class Navigation extends Component {
    constructor(props) {
        super(props);
        console.log('constructor', this);
        this.state = { items: [ ] };
    }

componentDidMount() {
    console.log('componentDidMount');

    if ( toDisplay( ) ) {
        api.bringCats()
        .then( categories => {
            const tot_cat = categories.map( cat => { return {name: cat.name, link: cat.link}; })
            this.setState({items: tot_cat,})
        })
    }
}

render() { 
    console.log("render")
    //some stuff
}
}

我希望日志按此顺序 1. 构造函数 2. ComponentDidMount 3. 渲染

我this使用 constructor 内部构造函数方法进行日志记录。我能够获得价值，items因为componentDidMount为什么会发生这种情况？并且它以正确的顺序记录（构造函数->didmount->render）但是为什么我items在调用componentDidMount.

我<Navigation/>在里面使用组件<Header/>

Header extends Component{
render(){
  return (<div> <Navigation/> </div>);
}
}

Answer 1

我正在尝试一些东西，发现这工作正常。

window.cnj = require('circular-json') /* 我在起始点第一行添加了它，这样我就可以在所有导入中访问它。*/

window.props = JSON.parse(window.cnj.stringify(simple));

我可以window.props从开发工具访问并且它按预期工作。

sample可以是字符串、数组、普通对象或循环对象。