再看React生命周期

来源：互联网发布：淘宝的快递软件叫啥编辑：程序博客网时间：2024/05/22 04:54

单个React组件的生命周期应该知道了吧，不知道看这https://facebook.github.io/react/docs/react-component.html
经常用到，也经常被面试官问到

当父子组件嵌套的时候构造函数和render之间的先后关系是啥，根据dom tree结构的特点，肯定是递归调用的，对于virtual dom的diff算法有兴趣的可以看这https://supnate.github.io/react-dom-diff/index.html，做了几个可视化还是挺有意思的。下面来看下父子嵌套的生命周期吧。

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      class A extends React.Component{        constructor(props){super(props);console.log('A created');}        render(){console.log('A render');return <span>A</span>}        componentDidMount(){console.log('A rendered');}      }      class B extends React.Component{        constructor(props){super(props);console.log('B created');}        render(){console.log('B render');return <span>B<A/></span>}        componentDidMount(){console.log('B rendered');}      }      class C extends React.Component{        constructor(props){super(props);console.log('C created');}        render(){console.log('C render');return <span>C<B/></span>}        componentDidMount(){console.log('C rendered');}      }      ReactDOM.render(        <C/>,        document.getElementById('example')      );    </script>  </body></html>

console 输出

C createdC renderB createdB renderA createdA renderA renderedB renderedC rendered

备注

代码可以直接复制到这里 http://www.runoob.com/try/try.php?filename=try_react_hw 测试

0 0