再看React生命周期

最新推荐文章于 2024-04-07 10:15:00 发布

浪漫不属意

最新推荐文章于 2024-04-07 10:15:00 发布

阅读量666

点赞数

分类专栏： react 文章标签： react生命周期父子组件生命周期

本文链接：https://blog.csdn.net/ohmyauthentic/article/details/69663702

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

单个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 created
C render
B created
B render
A created
A render
A rendered
B rendered
C rendered

备注

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

浪漫不属意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录