react新旧生命周期的区别是什么
react新旧生命周期的区别：1、新生命周期中去掉了三个will钩子，分别为componentWillMount、componentWillReceiveProps、componentWillUpdate；2、新生命周期中新增了两个钩子，分别为getDerivedStateFromProps（从props中得到衍生的state）和getSnapshotBeforeUpdate。
本教程操作环境：Windows7系统、react18版、Dell G3电脑。
react在版本16.3前后存在两套生命周期，16.3之前为旧版，之后则是新版，虽有新旧之分，但主体上大同小异。
React生命周期（旧）
值得强调的是：componentWillReceiveProps函数在props第一次传进来时不会调用，只有第二次后（包括第二次）传入props时，才会调用
shouldComponentUpdate像一个阀门，需要一个返回值(true or false)来确定本次更新的状态是不是需要重新render
React生命周期（新）
react新旧生命周期的区别
新的生命周期去掉了三个will钩子，分别是：componentWillMount、componentWillReceiveProps、componentWillUpdate
新的生命周期新增了两个钩子，分别是：
1、getDerivedStateFromProps：从props中得到衍生的state
接受两个参数：props，state
返回一个状态对象或者null，用来修改state的值。
使用场景：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
2、getSnapshotBeforeUpdate：在更新前拿到快照（可以拿到更新前的数据）
在更新DOM之前调用
返回一个对象或者null，返回值传递给componentDidUpdate
componentDidUpdate():更新DOM之后调用
接受三个参数：preProps,preState,snapshotValue
使用案例：
固定高度的p，定时新增一行，实现在新增的时候，使目前观看的行高度不变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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.0.1/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
<script type="text/babel">
class NewsList 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(<NewsList/>,document.getElementById('test'))
</script>
</body>
</html>说明：
在React v16.3中，迎来了新的生命周期改动。旧的生命周期也在使用，不过在控制台上可以看到弃用警告了。并且提示有三个生命周期钩子将会被弃用，尽量不要使用。再或者可以在其前边加前缀 UNSAFE_。
【相关推荐：Redis视频教程】
以上是react新旧生命周期的区别是什么的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何利用React和WebSocket构建实时聊天应用
Sep 26, 2023 pm 07:46 PM
如何利用React和WebSocket构建实时聊天应用引言：随着互联网的快速发展，实时通讯越来越受到人们的关注。实时聊天应用已经成为现代社交和工作生活中不可或缺的一部分。本文将介绍如何利用React和WebSocket构建一个简单的实时聊天应用，并提供具体的代码示例。一、技术准备在开始构建实时聊天应用之前，我们需要准备以下技术和工具：React：一个用于构建
React前后端分离指南：如何实现前后端的解耦和独立部署
Sep 28, 2023 am 10:48 AM
React前后端分离指南：如何实现前后端的解耦和独立部署，需要具体代码示例在当今的Web开发环境中，前后端分离已经成为一种趋势。通过将前端和后端代码分开，可以使得开发工作更加灵活、高效，并且方便进行团队协作。本文将介绍如何使用React实现前后端分离，从而实现解耦和独立部署的目标。首先，我们需要理解什么是前后端分离。传统的Web开发模式中，前端和后端是耦合在
如何利用React和Flask构建简单易用的网络应用
Sep 27, 2023 am 11:09 AM
如何利用React和Flask构建简单易用的网络应用引言：随着互联网的发展，网络应用的需求也越来越多样化和复杂化。为了满足用户对于易用性和性能的要求，使用现代化的技术栈来构建网络应用变得越来越重要。React和Flask是两种在前端和后端开发中非常受欢迎的框架，它们可以很好的结合在一起，用来构建简单易用的网络应用。本文将详细介绍如何利用React和Flask
如何利用React和RabbitMQ构建可靠的消息传递应用
Sep 28, 2023 pm 08:24 PM
如何利用React和RabbitMQ构建可靠的消息传递应用引言：现代化的应用程序需要支持可靠的消息传递，以实现实时更新和数据同步等功能。React是一种流行的JavaScript库，用于构建用户界面，而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用，并提供具体的代码示例。RabbitMQ概述：
React Router使用指南：如何实现前端路由控制
Sep 29, 2023 pm 05:45 PM
ReactRouter使用指南：如何实现前端路由控制随着单页应用的流行，前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库，提供了丰富的功能和易用的API，使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法，并提供一些具体的代码示例。安装ReactRouter首先，我们需
如何处理 C++ 函数指针的析构和生命周期管理？
Apr 17, 2024 pm 05:48 PM
在C++中，函数指针需要适当的析构和生命周期管理。可以通过以下方式实现：手动析构函数指针，释放内存。使用智能指针，如std::unique_ptr或std::shared_ptr，自动管理函数指针的生命周期。将函数指针绑定到对象，对象生命周期管理函数指针的析构。在GUI编程中，使用智能指针或绑定到对象可确保回调函数在适当的时候被析构，避免内存泄漏和不一致。
如何利用React和Google BigQuery构建快速的数据分析应用
Sep 26, 2023 pm 06:12 PM
如何利用React和GoogleBigQuery构建快速的数据分析应用引言：在当今信息爆炸的时代，数据分析已经成为了各个行业中不可或缺的环节。而其中，构建快速、高效的数据分析应用则成为了许多企业和个人追求的目标。本文将介绍如何利用React和GoogleBigQuery结合起来构建快速的数据分析应用，并提供详细的代码示例。一、概述React是一个用于构建
如何利用React和Docker打包和部署前端应用
Sep 26, 2023 pm 03:14 PM
如何利用React和Docker打包和部署前端应用前端应用的打包和部署是项目开发中非常重要的一环。随着现代前端框架的飞速发展，React已经成为了许多前端开发人员的首选。而Docker作为一种容器化解决方案，可以极大地简化应用的部署过程。本文将介绍如何利用React和Docker打包和部署前端应用，并提供具体的代码示例。一、准备工作在开始之前，我们需要先安装
