【09】基础知识：React组件的生命周期

天边月_2023-10-16 21:55

组件从创建到死亡它会经历一些特定的阶段。

React 组件中包含一系列勾子函数（生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子），会在特定的时刻调用。

我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

一、react 生命周期旧

初始化阶段：由 ReactDOM.render() 触发，初次渲染

1、构造器：constructor()

2、组件将要挂载的钩子：componentWillMount()

3、组件渲染或组件更新的钩子：render()

4、 组件挂载完毕的钩子：componentDidMount()

更新阶段：由组件内部 this.setSate() / this.forceUpdate() 或父组件 render 触发

1、控制组件更新的 "阀门" ：shouldComponentUpdate()

2、组件将要更新的钩子：componentWillUpdate()

3、组件渲染或组件更新的钩子：render()

4、组件更新完毕的钩子：componentDidUpdate()

卸载组件：由 ReactDOM.unmountComponentAtNode() 触发

1、组件将要卸载的钩子：componentWillUnmount()

父组件 render：组件 props 值改变触发

1、组件将要接收新的 props 的钩子：componentWillReceiveProps()

二、react 生命周期新


初始化阶段：由 ReactDOM.render() 触发，初次渲染

1、构造器：constructor()

2、从 props 得到一个派生状态：static getDerivedStateFromProps()

3、组件渲染或组件更新的钩子：render()

4、 组件挂载完毕的钩子：componentDidMount()

更新阶段：由组件内部 this.setSate() / this.forceUpdate() 或父组件 render 触发

1、static getDerivedStateFromProps()

2、控制组件更新的 "阀门" ：shouldComponentUpdate()

3、组件渲染或组件更新的钩子：render()

4、在更新之前获取快照：getSnapshotBeforeUpdate()

5、组件更新完毕的钩子：componentDidUpdate()

卸载组件：由 ReactDOM.unmountComponentAtNode() 触发

1、组件将要卸载的钩子：componentWillUnmount()

三、新旧生命周期总结

重要的勾子

1、组件渲染或组件更新的钩子：render()

2、组件挂载完毕的钩子：componentDidMount()

一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

3、组件将要卸载的钩子：componentWillUnmount()

一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

即将废弃的勾子

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

1、组件将要挂载的钩子：componentWillMount()

2、组件将要接收新的 props 的钩子：componentWillReceiveProps()

3、组件将要更新的钩子：componentWillUpdate()

四、案例

案例1：引出生命周期

需求：定义组件实现以下功能：

1、让指定的文本做显示 / 隐藏的渐变动画

2、从完全可见，到彻底消失，耗时 2S

3、点击 "不活了" 按钮从界面中卸载组件

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<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">
		// 创建组件
		class Life extends React.Component {
			state = { opacity: 1 }

			death = () => {
				// clearInterval(this.timer) // 清除定时器（可以卸载componentWillUnmount中）
				ReactDOM.unmountComponentAtNode(document.getElementById('test')) // 卸载组件
			}

			// 组件挂载完毕的钩子
			componentDidMount() {
				console.log('componentDidMount')
				this.timer = setInterval(() => {
					let { opacity } = this.state // 获取原状态
					opacity -= 0.1 // 减小0.1
					if (opacity <= 0) opacity = 1 
					this.setState({ opacity }) // 设置新的透明度
				}, 200)
			}

			// 组件将要卸载的钩子
			componentWillUnmount() {
				console.log('componentWillUnmount')
				clearInterval(this.timer) // 清除定时器
			}
			
			// 初始化渲染、状态更新之后 (state变化会触发render函数，定时器如果写在render中，会造成无限递归)
			render() {
				console.log('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>

案例二：React 生命周期旧

累加器，点击数值+1

html 复制代码 
<!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')
			}

			// 控制组件更新的 "阀门" 
			shouldComponentUpdate() {
				console.log('Count---shouldComponentUpdate')
				// 不写时，默认值为true，代表允许组件更新；写了以后，必须有返回值Boolan，true/false
				return true
			}

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

			// 组件渲染或组件更新的钩子
			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>
				)
			}

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

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

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

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

父组件 render 触发子组件 props 值改变

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_react生命周期(旧)</title>
</head>
<body>
	<!-- 准备好一个"容器" -->
	<div id="car"></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 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 {
			// 组件将要接收新的props的钩子（props第一次接收值时不触发）
			componentWillReceiveProps(props) {
				console.log('B---componentWillReceiveProps', props)
			}

			// 控制组件更新的 "阀门" 
			shouldComponentUpdate() {
				console.log('B---shouldComponentUpdate')
				// 不写时，默认值为true，代表允许组件更新；写了以后，必须有返回值Boolan，true/false
				return true
			}

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

			// 组件渲染或组件更新的钩子
			render() {
				console.log('B---render')
				const { carName } = this.props
				return (
					<div>我是B组件，接收到的车是：{carName}</div>
				)
			}

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

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

案例三：React 生命周期新

新生命周期新增方法：

static getDerivedStateFromProps() 从props得到一个派生状态，此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props 。派生状态会导致代码冗余。

getSnapshotBeforeUpdate() 在更新之前获取快照，此用法并不常见。它使得组件能在发生改变之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

html 复制代码 
<!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()
			}

			// 从props得到一个派生状态：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props, state) {
				console.log('getDerivedStateFromProps', props, state)
				return null // 必须有返回值，状态对象或者null
			}

			// 在更新之前获取快照
			getSnapshotBeforeUpdate() {
				console.log('getSnapshotBeforeUpdate')
				return 'atguigu' // 必有有返回值，快照或者null，将作为参数传递给 componentDidUpdate()
			}

			// 控制组件更新的 "阀门" 
			shouldComponentUpdate() {
				console.log('Count---shouldComponentUpdate')
				// 不写时，默认值为true，代表允许组件更新；写了以后，必须有返回值Boolan，true/false
				return true
			}

			// 组件渲染或组件更新的钩子
			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>
				)
			}

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

			// 组件更新完毕的钩子（接收参数：之前的的props、之前的state、传过来的快照）
			componentDidUpdate(prevProps, prevState, snapshotValue) {
				console.log('Count---componentDidUpdate', prevProps, prevState, snapshotValue)
			}

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

		}

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

案例四：getSnapShotBeforeUpdate 的使用场景

展示新闻列表，1s向上追加一条新闻，并保证页面视图区域内容不变。

思路：

利用 getSnapShotBeforeUpdate() 获取组件更新之前 内容的 scrollHeight，传递给 componentDidUpdate()

组件更新之后，设置当前容器的 scrollTop 值为，当前内容高度 - 组件更新之前内容高度

html 复制代码 
<!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>
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车，浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中，ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull3 小时前
ReactPress：构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心，方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别？
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04C++——超强级病毒代码05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07硬件预取之空间预取08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09Coze扣子平台完整体验和实践（附国内和国际版对比）10【SCS-CN】SCS-CN模型中CN值的确定