我没有立即在React文档中看到清晰的“这是父子之间的生命周期事件的顺序”,尽管我可能会错过它。
当然,凭经验确定是微不足道的:
class Child extends React.Component { constructor(...args) { super(...args); console.log("Child constructor"); } componentWillMount(...args) { console.log("Child componentWillMount"); } componentDidMount(...args) { console.log("Child componentDidMount"); } render() { console.log("Child render"); return <div>Hi there</div>; }}class Parent extends React.Component { constructor(...args) { super(...args); console.log("Parent constructor"); } componentWillMount(...args) { console.log("Parent componentWillMount"); } componentDidMount(...args) { console.log("Parent componentDidMount"); } render() { console.log("Parent render start"); const c = <Child />; console.log("Parent render end"); return c; }}ReactDOM.render(<Parent />, document.getElementById("react"));.as-console-wrapper { max-height: 100% !important;}<div id="react"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
这向我们显示了顺序:
父构造器父组件WillMount父渲染开始父渲染端子构造函数子组件WillMount儿童渲染子组件DidMount父组件
这让我想知道父母中孩子的顺序,所以:
class Child extends React.Component { constructor(props, ...rest) { super(props, ...rest); console.log(this.props.name + " constructor"); } componentWillMount(...args) { console.log(this.props.name + " componentWillMount"); } componentDidMount(...args) { console.log(this.props.name + " componentDidMount"); } render() { console.log(this.props.name + " render"); return <div>Hi from {this.props.name}!</div>; }}class Parent extends React.Component { constructor(...args) { super(...args); console.log("Parent constructor"); } componentWillMount(...args) { console.log("Parent componentWillMount"); } componentDidMount(...args) { console.log("Parent componentDidMount"); } render() { console.log("Parent render start"); const result = <div> <Child name="Child1" /> <Child name="Child2" /> </div>; console.log("Parent render end"); return result; }}ReactDOM.render(<Parent />, document.getElementById("react"));.as-console-wrapper { max-height: 100% !important;}<div id="react"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
这给了我们:
父构造器父组件WillMount父渲染开始父渲染端Child1构造函数Child1组件WillMountChild1渲染Child2构造函数Child2组件WillMountChild2呈现Child1组件DidMountChild2组件父组件
一点也不奇怪,但是可以仔细检查。:-)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)