React实例练习五lifeCyle 生命周期

最新推荐文章于 2019-01-28 16:27:50 发布

GJM_大萌

最新推荐文章于 2019-01-28 16:27:50 发布

阅读量179

点赞数

分类专栏： React 文章标签： React

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>

</head>
<body>
<div id="container">

</div>
<script type="text/babel">
    ReactDOM.render(
        <h1>HELLO,WORLD</h1>
        ,
        document.getElementById("container")
    );
    /*
        生命周期介绍
        1、组件的生命周期可分为三种状态
        Mounting: 组件挂载 已经插入真实的DOM
        1、componentWillMount
        组件将要挂载，在render之前执行，即使多次重复渲染该组件，或者改变了组件的state
        2、componentDidMount
        组件以挂载，在render之后执行，同一个组件重复渲染之执行一次

        Updating:组件的更新 正在被重新渲染
        1、componentWillReceiveProps(object nextProps)
        已加载组件收到新的props之前调用，注意组件初始化渲染时则不会执行
        2、shouldComponentUpdate(object nextProps,object netState)
        组件判断是否重新渲染时调用，该接口实际是在组件接收到了新的props或者
        新的state的时候 会立即调用
        3、componentWillUpdate(object nextProps,object nextState)
        组件将要更新
        4、componentDidUpdate(object prevProps,object prevState)
        组件已经更新
        Unmounting: 组件移除  移除真是DOM
        1、componentWillUnmount
        在组件要被移除之前的事件触发点，可以利用该方法执行一些必要的清理组件将要移除

        生命周期汇总的props和state相关：
        1、getDefaultProps 设置props属性默认值
        2、getInitialState 设置state属性初始值
        */


    let Demo = React.createClass({
        /*
        一、创建阶段
        流程：
        只调用getDefaultProps
        */
        getDefaultProps:function () {
            console.log("getDefaultProps---->");
            return{};
        },
        /*
       二、实例化阶段
       流程：
       getInitialState
       componentWillMount
       render
       componentDidMount
       */
        getInitialState:function () {
            console.log("getInitialState--->");
            return null;
        },
        componentWillMount:function () {
            console.log("componentWillMount--->");
        },
        componentDidMount:function () {
            console.log("componentDidMount--->");
        },
        componentWillReceiveProps:function () {
            /*
           三、更新阶段
           流程：
           componentWillReceiveProps
           shouldComponentUpdate//如果返回false 后面方法不执行
           componentWillUpdate
           render
           componentDidUpdate
           */
            console.log("componentWillReceiveProps--->");
        },
        shouldComponentUpdate:function () {
            console.log("shouldComponentUpdate--->");
            return true;
        },
        componentWillUpdate:function () {
            console.log("componentWillUpdate--->");
        },
        componentDidUpdate:function () {
            /*
          在render之后调用
          在该方法中，react会直接使用render方法返回的虚拟DOM对象创建的
          真实 DOM结构 可以在方法中
          */
            console.log("componentDidUpdate--->");
        },
        componentWillMount:function () {
            /*
        四、挂载阶段
        流程：
        componentWillUnMount
        */
            console.log("componentWillMount--->");
        }
    });
   
    ReactDOM.render(
        <Demo/>,
        document.getElementById("container")
    );
    ReactDOM.render(
        <Demo/>,
        document.getElementById("container")
    );
    ReactDOM.unmountComponentAtNode(
        document.getElementById("container")
    );
</script>
</body>
</html>