React生命周期

最新推荐文章于 2024-06-21 11:40:44 发布
最新推荐文章于 2024-06-21 11:40:44 发布
阅读量726 收藏 23
点赞数 28
分类专栏： react 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61471530/article/details/139206056
版权

文章目录

一、旧生命周期

如图：
生命周期（旧）

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">
	<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">
		
		//创建组件
		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');
			}

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

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

			//组件将要更新的钩子
			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:'奔驰'}

			changeCar = ()=>{
				this.setState({carName:'奥拓'})
			}

			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(props){
				console.log('B---componentWillReceiveProps',props);
			}

			//控制组件更新的“阀门”
			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(<Count/>,document.getElementById('test'))
	</script>
</body>
</html>

二、新生命周期（React16.0之后的生命周期）

在新生命周期函数中移除除了componentWillUnmount之外的所有"will"相关生命周期函数

如图：
生命周期（新）

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">
	<title>3_react生命周期(新)</title>
</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 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()
			}
			
			//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}

			//在更新之前获取快照
			getSnapshotBeforeUpdate(){
				console.log('getSnapshotBeforeUpdate');
				return 'hh'
			}

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

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

			//控制组件更新的“阀门”
			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>

总结（生命周期中各个函数的用法）

1.constructor(props)

通常，在 React 中，构造函数仅用于以下两种情况：

1、通过给 this.state 赋值对象来初始化内部 state。
2、为事件处理函数绑定实例
在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state，请直接在构造函数中为 this.state 赋值初始 state

constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

2.static getDerivedStateFromProps(props, state)

此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

3.shouldComponentUpdate(nextProps, nextState)

根据 shouldComponentUpdate() 的返回值（boolean值），判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

4.render()

render() 方法是 class 组件中唯一必须实现的方法。
当 rende 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

1、React 元素。通常通过 JSX 创建。例如，

会被 React 渲染为 DOM 节点， 会被 React 渲染为自定义组件，无论是
还是 均为 React 元素。
2、数组或 fragments。 使得 render 方法可以返回多个元素。欲了解更多详细信息，请参阅 fragments 文档。
3、Portals。可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息，请参阅有关 portals 的文档。
4、字符串或数值类型。它们在 DOM 中会被渲染为文本节点。
5、布尔类型或 null。什么都不渲染。（主要用于支持返回 test && 的模式，其中 test 为布尔类型。)
render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。

如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考。

5.getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。
应返回 snapshot 的值（或 null）。

getSnapshotBeforeUpdate例子：

<!DOCTYPE html>
<html lang="en">
<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>

6.componentDidMount()

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

7.componentDidUpdate()

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

8.componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

9.static getDerivedStateFromError(error)

此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显降级 UI
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级  UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

10.componentDidCatch(error, info)

此生命周期在后代组件抛出错误后被调用。 它接收两个参数：

error —— 抛出的错误。
info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。
componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况
过期的生命周期函数见

一条不想当淡水鱼的咸鱼
关注
  • 28
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 生命周期
zep
09-22 3015
1.组件从创建到死亡它会经历一些特定的阶段。 2.React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。 3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。 一、react生命周期（旧的） 生命周期的三个阶段（旧） 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 常用 一.
React生命周期详解
Amelian的博客
08-31 1万+
前言 react生命周期在各个阶段的执行顺序是有所差异的，接下来我们将详细解析react在各个阶段生命周期的执行顺序，以及各个生命周期在组件中充当的作用（以下生命周期指的是react16之后的版本）......
react生命周期详细介绍
热门推荐
luobo2345的博客
02-10 2万+
react生命周期详解，挂载渲染，卸载和错误捕获
React生命周期钩子函数
越努力，越幸运！
01-28 7882
前言 所谓的生命周期就是指某个事物从开始到结束的各个阶段，就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。当然在 React.js 中指的是组件从创建到销毁的过程，React 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是React 的生命周期，各个阶段有相对应的事件钩子，用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的，所以一般特定的钩子做特定的事。 一、React生命周期..
react生命周期
weixin_56548455的博客
08-18 709
生命周期概念广义来说生命周期泛指自然界和人类社会中各种客观事物的阶段性变化及其规律在 React 框架中则用来描述组件挂载更新卸载三个阶段。
React 生命周期
1234Wu--Blog
01-30 1550
React 生命周期 1、生命周期图 react生命周期函数挂载、卸载只会执行一次，更新会执行多次。 2、生命周期的三个阶段 1）挂载时（创建） 执行时机：组件创建时（页面加载时） 执行顺序：Constructor() --> render() --> componentDidMount() 钩子函数 触发时机 作用 constructor () 创建组件时 1,初始化state； 2.为事件处理程序绑定this render () 每次组件渲染都会触发 渲染UI（
React生命周期函数
weixin_42447364的博客
06-21 4738
React生命周期函数
浅谈 React 生命周期
p1967914901的博客
04-03 1149
浅谈 React 生命周期浅谈 React 生命周期旧版的生命周期新版的生命周期详解各个生命周期函数constructorgetDerivedStateFromPropsrendercomponentDidMountshouldComponentUpdategetSnapshotBeforeUpdatecomponentDidUpdatecomponentWillUnmount过时的生命周期方法UNSAFE_componentWillMountUNSAFE_componentWillReceiveProps
react 生命周期实例分析
10-15
React生命周期是指React组件在其创建、渲染、更新和销毁过程中经历的一系列方法调用。这些方法提供了在特定阶段插入自定义逻辑的机会，使得我们可以更好地控制组件的行为。本文将深入探讨React组件的生命周期，通过...
React生命周期原理与用法踩坑笔记
11-21
本文实例讲述了React生命周期原理与用法。分享给大家供大家参考，具体如下： React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲 ...
react生命周期函数图解
10-09
React中重要的部分就是生命周期函数。与其他框架不同，React的生命周期函数不同阶段支持不同的状态和属性变化，从而进行重新渲染。不同周期执行不同的函数对于整个开发过程很重要。
React 中的 ErrorBoundary
hawk2014bj的博客
06-18 618
React 框架中通过 getDerivedStateFromError 方法进行异常处理，项目开发可以自定义一个类组件并实现该方法进行组件异常处理。
【React】《React 学习手册 (第2版) 》笔记-Chapter8-处理数据
江湖人称菠萝包
06-18 1676
倘若在请求的过程中有什么地方出错了，那就可以说 HTTP 请求失败，或者 promise 被拒了。在 Google Chrome 中如果想限制网络速度，单击“Online”旁边的箭头，在打开的菜单中，你可以选择不同的速度，选择“Fast 3G”和“Slow 3G”对网络请求的速度限制较大。前面的例子之所以发送瀑布式请求，是因为组件是一个套一个渲染的，前一个组件未渲染之前不能发起下一个请求。在用户滚动界面的过程中，我们要消除用户已经看过的结果，并渲染位于屏幕范围以外的新结果，随时准备展示。
如何使用React的Context API来实现跨组件的状态共享？
weixin_44714345的博客
06-19 470
通过以上步骤，你可以在React应用中使用Context API来实现跨组件的状态共享。请注意，使用Context API时要小心避免过度使用和滥用，因为它可能导致组件之间的耦合度增加，影响代码的可维护性。在React中，Context API是一种用于跨组件共享状态的方法。
【八股系列】shouldComponentUpdate是为了解决什么问题？(React)
to_the_Future的博客
06-18 372
shouldComponentUpdate是为了解决什么问题？(React)
【React】React 的StrictMode作用是什么，怎么使用？
读心悦
06-17 229
React的是一个用于在开发环境中检测潜在问题的工具，它可以帮助开发者在开发阶段识别并解决一些常见的编码问题，从而提高代码质量和应用的可靠性。以下是。
【React篇】父组件渲染时避免重复渲染子组件的3种处理方法
最新发布
遇见小美好
06-21 279
React父组件渲染时避免重复渲染子组件的3种处理方法
React的列表和Key
zayyo的博客
06-21 420
如果我们要在React中把一个数组转化成为我们的列表要怎么转换呢？你可以通过使用{}在 JSX 内构建一个元素集合。我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成标签，最后我们将得到的数组赋值给 listItems.然后我们把整个listItems插入到元素中，然后渲染进 DOM。当我们运行这段代码，将会看到一个警告，意思是当你创建一个元素时，必须包括一个特殊的key属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值