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

拼搏现实的明天。 2024-05-01 16:22 3阅读 0赞

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

![c26393ab9b8247c1a98adc2edb653b49.png][]

三个阶段

*  挂载阶段
    
     *  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>
    
    <script
            crossorigin
            src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    
    <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>

![7bbdaf1689f7402fa36e95a1a03578ac.png][]

[c26393ab9b8247c1a98adc2edb653b49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/89c54a788abd41aab256badae0ffe49a.png
[7bbdaf1689f7402fa36e95a1a03578ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/172d7fac490a4b45aec9ff17be1b59e3.png