React笔记_生命周期（详细）

最新推荐文章于 2024-09-19 10:55:28 发布

冰淇淋配马卡龙

最新推荐文章于 2024-09-19 10:55:28 发布

阅读量892

点赞数 1

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

本文链接：https://blog.csdn.net/qq_51219425/article/details/123400318

版权

react笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

生命周期的理解

组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

引出生命周期

对组件进行相应渲染
在这里插入图片描述
以及或者卸载组件，使用自带函数unmountComponentAtNode()

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>1_引出生命周期</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>

    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom，用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">   //<!--此处一定要写babel-->
        //创建组件
        class Life extends React.Component{

            state={opacity:1}   //透明度

            death=()=>{
                //清除定时器
                //clearInterval(this.timer)
                //卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            /*action=()=>{
                setInterval(()=>{
                    //获取原状态
                    let {opacity}=this.state
                    //减小0.1
                    opacity -= 0.1
                    if(opacity <= 0) opacity=1
                    //设置新的透明度
                    this.setState({opacity})
                },200)
            }*/

            //组件挂载完毕
            componentDidMount(){
                //定时器
                this.timer = setInterval(()=>{
                    //获取原状态
                    let {opacity}=this.state
                    //减小0.1
                    opacity = opacity-0.1
                    if(opacity <= 0) opacity=1
                    //设置新的透明度
                    this.setState({opacity})
                },200);
            }
            //组件将要卸载时
            componentWillUnmount(){
                //清除定时器
                clearInterval(this.timer)
            }
            //render调用的时机：初始化渲染、状态更新之后
            render(){

                return(
                    <div>
                        <h2 style={{opacity:this.state.opacity}}>React学不会怎么办？</h2>
                        <button onClick={this.death}>不活了</button>
                        {/*<button onClick={this.action}>开始变化</button>*/}    
                    </div>
                )
            }
        }
        //渲染组件
        ReactDOM.render(<Life/>,document.getElementById('test'))
        
    </script>
    </body>
    </html>

在这里插入图片描述

react的生命周期（旧）

在这里插入图片描述

setState()流程

shouldComponentUpdate()不写时，默认返回值为true;如果写了就必须写返回值
在这里插入图片描述

状态没更新前：
在这里插入图片描述

状态更新后：
在这里插入图片描述

forceUpdate()流程

当阀门shouldComponentUpdate()的返回值为false，也就是阀门关闭时
在这里插入图片描述
可以进行forceUpdate()强制更新流程

父组件render流程

A、B父子组件结构

class A extends React.Component{
            //初始化状态
            state={carName:"奔驰"}

            changeCar=()=>{
                this.setState({carName:'驰奔奔'})
            }

            render(){
                return(
                    <div>
                       <div>我是A组件</div>
                       <button onClick={this.changeCar}>换车</button>
                       <B carName={this.state.carName}/> 
                    </div>
                )
            }
        }

        class B extends React.Component{
            componentWillReceiveProps(props){
                console.log('B----componentWillReceiveProps',props);
            }
            render(){
                return(
                    <div>
                       我是B组件，接收到的车是：{this.props.carName} 
                    </div>
                )
            }
        }

重要代码：
在这里插入图片描述
点击“换成”按钮后显示：
（因为componentWillReceiveProps()函数其实是被第二次调用之后才会显示调用其中的内容）

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>2_react生命周期（旧）</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>

    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom，用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">   //<!--此处一定要写babel-->
        //创建组件
        class Count extends React.Component{
            
            constructor(props){
                console.log('Count-constructor');
                super(props)

                this.state={count:0}
            }
            
            
            add=()=>{
                const {count}=this.state

                this.setState({count:count+1})
            }
            death=()=>{
                //卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            //强制更新按钮的回调
            force=()=>{
                //卸载组件
                this.forceUpdate()
            }
            //组件将要挂载的钩子
            componentWillMount(){
                console.log('Count-componentWillMount');
            }
            //组件挂载完毕的钩子
            componentDidMount(){
                console.log('Count-componentDidMount');
            }
            //组件将要卸载的钩子
            componentWillUnmount(){
                console.log('Count-componentWillUnmount');
            }
            //控制组件更新的阀门
            //不写时，默认返回值为true;如果写了就必须写返回值
            shouldComponentUpdate(){
                console.log('Count-shouldComponentUpdate');
                return false
            }
            //组件将要更新的钩子
            componentWillUpdate(){
                console.log('Count-componentWillUpdate');
            }
            //组件更新完毕的钩子
            componentDidUpdate(){
                console.log('Count-componentDidUpdate');
            }
            //render调用的时机：初始化渲染、状态更新之后
            render(){
                console.log('Count-render');
                const {count} = this.state
                return(
                    <div>
                        <h2>当前求和为:{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
        }
        
        class A extends React.Component{
            //初始化状态
            state={carName:"奔驰"}

            changeCar=()=>{
                this.setState({carName:'驰奔奔'})
            }

            render(){
                return(
                    <div>
                       <div>我是A组件</div>
                       <button onClick={this.changeCar}>换车</button>
                       <B carName={this.state.carName}/> 
                    </div>
                )
            }
        }

        class B extends React.Component{
            componentWillReceiveProps(props){
                console.log('B----componentWillReceiveProps',props);
            }
            render(){
                return(
                    <div>
                       我是B组件，接收到的车是：{this.props.carName} 
                    </div>
                )
            }
        }
        //渲染组件
        //ReactDOM.render(<Count/>,document.getElementById('test'))
        ReactDOM.render(<A/>,document.getElementById('test'))
    </script>
    </body>
    </html>