React 组件的生命周期

最新推荐文章于 2024-05-27 16:47:42 发布
最新推荐文章于 2024-05-27 16:47:42 发布
阅读量167 收藏
点赞数
分类专栏： react 文章标签： js react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IAN27/article/details/116131100
版权

1. 组件的生命周期

需求:定义组件实现以下功能：
1. 让指定的文本做显示 / 隐藏的渐变动画
2. 从完全可见，到彻底消失，耗时2S
3. 点击“不活了”按钮从界面中卸载组件

1） 引出生命周期

    //生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
   //render调用的时机是2个：初始化渲染、状态更新之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <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">
    //创建组件
    //生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
    class Life extends React.Component{

        state = {opacity:1}

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

        //render调用的时机是2个：初始化渲染、状态更新之后
        render(){
            return(
                <div>
                <h2 style={{opacity:this.state.opacity}}>React学不会怎么办？</h2>
                <button onClick={this.death}>不活了</button>
                </div>
            )
        }
    }

    //渲染组件
    ReactDOM.render(<Life/>,document.getElementById('test'))
</script>
</body>
</html>

2）组件生命周期的三个阶段（旧）

在这里插入图片描述

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
	1.	constructor()
	2.	componentWillMount()
	3.	render()
	4.	componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
	1.	shouldComponentUpdate()
	2.	componentWillUpdate()
	3.	render()
	4.	componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
	1.	componentWillUnmount()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <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">
    /*
    1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
        1.	constructor()
        2.	componentWillMount()
        3.	render()
        4.	componentDidMount() ===> 常用**
                一般在这个钩子中，做一些初始化的事。例如：开启定时器，发送网络请求，订阅消息

	2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
        1.	shouldComponentUpdate()
        2.	componentWillUpdate()
        3.	render() ===> 必用**
        4.	componentDidUpdate()

	3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
        1.	componentWillUnmount() ===> 常用**
                一般在这个钩子中做一些收尾的事。例如：关闭定时器，取消订阅消息，

    */

    //创建组件
    class Count extends React.Component{

        constructor(props){
            console.log('Count-constructor');
            super(props)

            //初始化状态
            this.state = {count:0}
        }

        //加1按钮的回调
        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');
        }

        //组件将要卸载的钩子
        componentWillUnount(){
            console.log('Count-componentWillUnount');
        }

        //控制组件更新的阀门
        shouldComponentUpdate(){
            console.log('Count-shouldComponentUpdate');
            return false
        }

        //组件将要更新的钩子
        componentWillUpdate(){
            console.log('Count-componentWillUpdate');
        }

        //组件更新完毕的钩子
        componentDidUpdate(){
            console.log('Count-componentDidUpdate');
        }

        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>
            )
        }
    }

    //父组件A
    class A extends React.Component{

        //初始化状态
        state={carName:'benz'}

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

    //子组件B
    class B extends React.Component{
        //组件将要接收新的props的钩子
        componentWillReceiveProps(){
            console.log('B-componentWillReceiveProps');
        }

        //控制组件更新的阀门
        shouldComponentUpdate(){
            console.log('B-shouldComponentUpdate');
            return true
        }

        //组件将要更新的阀门
        componentWillUpdate(){
            console.log('B-componentWillUpdate');
        }

        //组件更新完毕的阀门
        componentDidUpdate(){
            console.log('B-componentDidUpdate');
        }
        render(){
            console.log('B-render');
            return(
                <div>我是B组件，接收到的车是：{this.props.carName}</div>
            )
        }
    
     }
    //渲染组件
    ReactDOM.render(<A/>,document.getElementById('test'))
</script>
</body>
</html>

3） 组件的生命周期（新）
在这里插入图片描述

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
            1.	constructor()
            2.	getDerivedStateFromProps 
            3.	render()
            4.	componentDidMount() ===> 常用**
            一般在这个钩子中，做一些初始化的事。例如：开启定时器，发送网络请求，订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
            1.	getDerivedStateFromProps
            2.	shouldComponentUpdate()
            3.	render() ===> 必用**
            4.	getSnapshotBeforeUpdate
            5.	componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
            1.	componentWillUnmount() ===> 常用**
            一般在这个钩子中做一些收尾的事。例如：关闭定时器，取消订阅消息，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>3_react生命周期(新)</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>

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

<script type="text/babel">

    //创建组件
    class Count extends React.Component{

        constructor(props){
            console.log('Count-constructor');
            super(props)

            //初始化状态
            this.state = {count:0}
        }

        //加1按钮的回调
        add = () => {
            //获取愿状态
            const{count} = this.state
            //更新状态
            this.setState({count:count+1})
        }

        //卸载组件按钮的回调
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        //强制更新按钮的回调
        force = () => {
            this.forceUpdate()
        }

        //从props得到一个衍生的状态，使用场景及其罕见
        //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
        static getDerivedStateFromProps(props,state){
            console.log('getDrivedStateFromProps',props,state);
            return null
        }

        //在更新之前获取快照，此用法并不常见
        getSnapshotBeforeUpdate(){
            console.log('getSnapshotBeforeUpdate');
            return 'atguigu'
        }

        //组件挂载完毕的钩子
        componentDidMount(){
            console.log('Count-componentDidMount');
        }

        //组件将要卸载的钩子
        componentWillUnount(){
            console.log('Count-componentWillUnount');
        }

        //控制组件更新的阀门
        shouldComponentUpdate(){
            console.log('Count-shouldComponentUpdate');
            return true
        }

        //组件更新完毕的钩子
        componentDidUpdate(preProps,preState,snapshotValue){
            console.log('Count-componentDidUpdate',preProps,preState,snapshotValue);
        }



        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>
            )
        }
        
    }

    //渲染组件
    ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>
</body>
</html>

4） 重要的钩子与即将废弃的钩子

重要的钩子
	1.	render：初始化渲染或更新渲染调用
	2.	componentDidMount：开启监听, 发送ajax请求
	3.	componentWillUnmount：做一些收尾工作, 如: 清理定时器


即将废弃的钩子
	1.	componentWillMount
	2.	componentWillReceiveProps
	3.	componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

5） getSnapshotBeforeUpdate的使用场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>4_getSnapshotBeforeUpdate的使用场景</title>
    <style>
        .list{
            width:200px;
            height: 150px;
            background-color: skyblue;
            overflow: auto;
        }
        .news{
            height: 30px;
        }
    </style>
</head>


<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>

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

<script type="text/babel">
    class NewList extends React.Component{

        state = {newsArr:[]}

        componentDidMount(){
            setInterval(() => {
                //获取状态
                const{newsArr} = this.state
                //模拟一条新闻
                const news = '新闻'+(newsArr.length+1)
                //更新状态
                this.setState({newsArr:[news,...newsArr]})
            },1000)
        }

        getSnapshotBeforeUpdate(){
            return this.refs.list.scrollHeight
        }

        componentDidUpdate(preProps,preState,height){
            this.refs.list.scrollTop += this.refs.list.scrollHeight - height
        }

        render(){
            return(
                <div className="list" ref='list'>
                    {
                        this.state.newsArr.map((n,index) => {
                            return <div key = {index} className = 'news'>{n}</div>
                        })
                    }
                </div>
            )
        }
    }

    ReactDOM.render(<NewList/>,document.getElementById('test'))
</script>
</body>
</html>

6） 虚拟DOM与DOM Diffing算法

基本原理图
在这里插入图片描述
a. 验证Diffing算法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>1_验证Diffing算法</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>

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

<script type="text/babel">
    class Time extends React.Component{
        state = {date:new Date()}

        componentDidMount(){
            setInterval(() => {
                this.setState({
                    date:new Date()
                })
            ,1000})
        }

        render(){
            return(
                <div>
                <h1>Hello</h1>
                <input type="text" />
                <span>
                现在是：{this.state.date.toTimeString()}
                <input type="text" />
                </span>
                </div>
            )
        }
    }

    ReactDOM.render(<Time/>,document.getElementById('test'))
</script>
</body>
</html>

b. key的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>2_key的作用</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></div>

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

<script type="text/babel">


    class Person extends React.Component{

        state = {
            persons:[
                {id:1,name:'tim',age:11},
                {id:2,name:'tom',age:1},
            ]
        }

        add = () => {
            const{persons} = this.state
            const p = {id:persons.length+1,name:'小王',age:20}
            this.setState({persons:[p,...persons]})
        }   

        render(){
            return(
               <div>
               <h2>展示人员信息</h2>
               <button onClick={this.add}>添加一个小王</button>
               <h3>使用index(索引值)作为key</h3>
               <ul>
                {
                    this.state.persons.map((personObj,index) => {
                    return <li key={index}>{personObj.name}----{personObj.age} <input type="text"/> </li>
                    })
                }
                </ul>
                

                <hr/>
                <hr/>

                <h3>使用id(数据的唯一标识)作为key</h3>
                <ul>
                {this.state.persons.map((personObj) => {
                    return <li key={personObj.id}>{personObj.name}----{personObj.age} <input type="text"/> </li>
                })}
                </ul>
                </div>
            )
        }
    }
    ReactDOM.render(<Person/>,document.getElementById('test'))

</script>
</body>
</html>
IAN27
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React生命周期详解
小陈的博客
01-11 1万+
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析
react生命周期详细介绍
热门推荐
luobo2345的博客
02-10 2万+
react生命周期详解，挂载渲染，卸载和错误捕获
React的生命周期总结
最新发布
ivan5277的博客
05-27 821
React组件的生命周期可以概述为几个关键阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting），以及错误处理。随着React的发展，特别是引入Hooks之后，经典类组件的生命周期方法逐渐被函数组件中的Effect Hooks和新的生命周期方法所替代。
React生命周期
前端精髓
04-12 649
原图：链接 挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下： static getDerivedStateFromPr...
React生命周期执行顺序详解
qq_44699923的博客
08-23 8575
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html
React 组件生命周期
12-13
React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： ...
老生常谈js-react组件生命周期
10-19
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React组件生命周期详解
12-03
这个方法是用来设置组件默认的props，组件生命周期只会调用一次。但是只适合react.createClass直接创建的组件，使用ES6/ES7创建的这个方法不可使用，ES6/ES7可以使用下面方式： //es7 class Component { static ...
实例讲解React 组件生命周期
10-15
在React开发中，组件生命周期是理解其工作原理的关键部分。组件生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有特定的方法，开发者可以利用这些方法来执行...
React组件的生命周期
weixin_43512997的博客
05-11 5222
1. 组件生命周期概述 什么是组件的生命周期？ 组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程，这个过程就叫做组件的生命周期。react在组件的生命周期中提供了一系统的钩子函数，可以让开发者在函数中注入代码，这些代码会在适当的时候运行。为开发人员在不同阶段操作组件提供了时机。 注意：只有类组件才有生命周期。函数组件每次都是重新运行函数，旧的组件即刻被销毁 组件的生命周期主要包括哪几个阶段？ 组件的生命周期可以被分为3个阶段：挂载阶段、更新阶段、卸载阶段 以react旧的生命
react 生命周期
zep
09-22 3018
1.组件从创建到死亡它会经历一些特定的阶段。 2.React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。 3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。 一、react生命周期（旧的） 生命周期的三个阶段（旧） 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 常用 一.
彻底搞懂 React 生命周期
BLUEHEART
03-11 1746
1. React的生命周期有哪些？ React 通常将组件生命周期分为三个阶段： 装载阶段（Mount），组件第一次在DOM树中被渲染的过程； 更新过程（Update），组件状态发生变化，重新更新渲染的过程； 卸载过程（Unmount），组件从DOM树中被移除的过程； https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 1.1 组件挂载阶段 挂载阶段组件被创建，然后组件实例插入到 DOM 中，完成组件的第一次渲染，该过程只会发生
React 生命周期
1234Wu--Blog
01-30 1560
React 生命周期 1、生命周期图 react生命周期函数挂载、卸载只会执行一次，更新会执行多次。 2、生命周期的三个阶段 1）挂载时（创建） 执行时机：组件创建时（页面加载时） 执行顺序：Constructor() --> render() --> componentDidMount() 钩子函数 触发时机 作用 constructor () 创建组件时 1,初始化state； 2.为事件处理程序绑定this render () 每次组件渲染都会触发 渲染UI（
react 生命周期函数
AmbroseLe
09-10 302
目录 componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount componentWillMount 在渲染前调用,在客户端也在服务端。...
三、react组件的生命周期
weixin_45311714的博客
11-16 399
销毁期指的是组件被卸载的时候，此时有一个声明周期函数会执行：(一般这个生命周期函数中可以做一些清除的工作)灵活掌握react组件的生命周期以及组件的活动过程。中去调用请求接口，也不要去写太多的逻辑、不要调用。这些生命周期中初始化调用请求接口。能够灵活使用react的生命周期。每个生命周期接收的参数。
【译】最新版本react组件生命周期详解（v16.3.1）
mytac的博客
04-09 8669
16版本的react对组件的生命周期函数进行了一些修改，在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论。为了良好的阅读体验，请查看github原文 组件生命周期概述 1.初始化 在组件初始化阶段会执行 1. constructor 2. static getDerivedStateFromProps() 3. componentWillMount()...
值发生改变时调用componentWillReceiveProps
随风而欲的博客
10-30 426
/** * 组件的生命周期分成三个状态： * Mounting：已插入真实 DOM * Updating：正在被重新渲染 * Unmounting：已移出真实 DOM * React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。 * * componentWillMount() * c...
React组件生命周期
04-01
React组件生命周期是指组件从创建到销毁的整个过程。React组件的生命周期分为三个阶段：挂载阶段、更新阶段、卸载阶段。 1. 挂载阶段 - constructor()：组件的构造函数，在组件创建时调用。 - static getDerivedStateFromProps()：在组件创建时和组件更新时都会调用，用于根据props更新state。 - render()：在组件创建和更新时调用，用于渲染组件的UI。 - componentDidMount()：组件挂载到DOM树上后调用，用于进行异步操作和DOM操作。 2. 更新阶段 - static getDerivedStateFromProps()：在组件创建时和组件更新时都会调用，用于根据props更新state。 - shouldComponentUpdate()：在组件更新前调用，用于判断是否需要更新组件。 - render()：在组件创建和更新时调用，用于渲染组件的UI。 - componentDidUpdate()：在组件更新后调用，用于进行异步操作和DOM操作。 3. 卸载阶段 - componentWillUnmount()：在组件卸载前调用，用于进行一些清理工作，如取消定时器、取消事件监听等。 React组件生命周期中有一些可以被重写的方法，这些方法被称为生命周期钩子函数。这些钩子函数可以在不同的生命周期阶段执行一些自定义的操作，以满足不同的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值