ReactJS组件的生命周期详解

最新推荐文章于 2023-11-21 02:56:59 发布

钉某人

最新推荐文章于 2023-11-21 02:56:59 发布

阅读量515

点赞数 1

分类专栏： React Native 文章标签： ReactJ生命周期

本文链接：https://blog.csdn.net/xiaochuanding/article/details/54099226

版权

React Native 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

ReactJS组件的生命周期详解

这篇文章主要讲一下ReactJS组件的生命周期，ReactJS组件的生命周期可以归结为4各阶段，每个阶段可能会相继调用多个方法。
1.创建阶段
getDefaultProps
2.实例化阶段
getInitialState->componentWillMount->render->componentDidMount
3.更新阶段
componentWillReceiveProps->shouldUpdateReactComponent->componentWillUpdate->componentDidUpdate
4.销毁阶段
componentWillUnMount

下面是源码，注释很详细：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactJS组件的生命周期</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        var HelloMessage=React.createClass({
            //1.创建阶段
            getDefaultProps: function () {
                在创建类的时候被调用 this.props该组件的默认属性
                console.log("getDefaultProps");
                return {};
            },
            //2.实例化阶段
            getInitialState: function () {
                //初始化组件的state值，其返回值会赋值给组件的this.state状态，获取this.state的默认值
                console.log("getInitialState");
                return {};
            },
            componentWillMount: function () {
                //在render之前调用此方法，业务逻辑的处理都应该放在这里，比如对state的操作等
                console.log("componentWillMount");
            },
            render: function () {
                //根据state值，渲染返回一个虚拟的DOM
                console.log("render");
                return <h1 style={{color: '#000000', fontSize: '24px'}}> ReactJS的--{this.props.name}--生命周期</h1>
            },
            componentDidMount: function () {
                //该方法在render之后，在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构，组件内部可以通过this.getDOMNode()来获取当前组件的节点
                console.log("componentDidMount");
            },
            //3.更新阶段，主要发生在用户操作之后或者父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整
            componentWillReceiveProps: function () {
                //该方法发生在this.props呗 修改或者父组件调用setProps()方法之后，调用this.setState可以完成对state的修改
                console.log("componentWillReceiveProps");
            },
            shouldUpdateReactComponent: function () {
                //用来拦截新的props或者state,根据逻辑来判断，是否需要更新
                console.log("shouldUpdateReactComponent");
                return true;
            },
            componentWillUpdate: function () {
                //shouldUpdateReactComponent返回true时执行，组件将更新
                console.log("componentWillUpdate");
            },
            componentDidUpdate: function () {
                //组件更新完毕，我们常在这里做一些DOM操作
                console.log("componentDidUpdate");
            },
            //4.销毁阶段
            componentWillUnMount: function () {
                //销毁时被调用，通常做一些取消事件绑定，移除虚拟DOM对应的组件数据结构销毁一些无效的定时器等工作
                console.log("componentWillUnMount");
            }
        });
        ReactDOM.render(<HelloMessage name="HelloMessage的name属性"/>,document.getElementById("example"));
    </script>

</body>
</html>