笔记十一、（旧）深入理解React的生命周期—挂载阶段

最新推荐文章于 2024-11-08 11:15:03 发布

ElendaLee

最新推荐文章于 2024-11-08 11:15:03 发布

阅读量110

点赞数

分类专栏： # React 文章标签： react.js 笔记前端

本文链接：https://blog.csdn.net/ElendaLee/article/details/134053343

版权

React 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

React17版本之前的生命周期函数（旧）

三个阶段

挂载阶段
- constructor ->componentWillMount->render->componentDidMount

constructor：这是一个构造器，接收父组件的props和初始化state值
componentWillMount：组件将要挂载，在render之前执行这个函数，用的比较少
render：常用且重要的钩子函数之一，render将标签渲染在浏览器显示页面内容
componentDidMount：render执行完，可以操作dom，通常请求后端接口数据，来渲染页面，开启定时器

更新阶段

setState更新阶段

forceUpDate更新阶段

父组件render更新阶段

卸载阶段

unmountComponentAtNode->componentWillUnmount

unmountComponentAtNode：卸载当前组件
componentWillUnmount：函数里面关闭一些定时器或其他收尾的操作

代码及运行结果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="root"></div>
<script
        crossorigin
        src="https://unpkg.com/react@16/umd/react.development.js"
></script>
<!-- 引入react-dom用于支持react操作dom -->
<script
        crossorigin
        src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>
<!-- 引入babel转换jsx为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    class Test extends React.Component {
        constructor(props) {
            // 生命周期 - 构造器
            console.log('constructor');
            super(props);
            this.state = {text: "react"}
        }

        // 生命周期 - 组件将要挂载
        componentWillMount() {
            console.log('componentWillMount');
        }

        render() {
            // 生命周期 - 渲染虚拟 DOM
            console.log('render');
            return <div>学习React -> {this.state.text} -> {this.props.name}</div>
        }

        // 生命周期 - 挂载完成
        componentDidMount() {
            console.log('componentDidMount');
            // 对root组件进行卸载 执行下面的卸载函数
            ReactDOM.unmountComponentAtNode(document.getElementById("root"));
        }

        // 生命周期 - 组件卸载生命周期函数
        componentWillUnmount(){
            console.log("componentWillUnmount");
        }

    }

    ReactDOM.render(<Test name={'elendas'}/>, document.getElementById("root"));
</script>
</body>
</html>