0
点赞
收藏
分享

微信扫一扫

React 学习笔记（14）：组件的生命周期

海牙秋天 2022-03-13 阅读 109
react.js学习javascript

1，生命周期函数的理解

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

2，React 旧版生命周期函数

2-1，旧版生命周期函数图

2-2，旧版生命周期函数单独讲解

  1. componentWillMount：在组件挂载前触发执行。
  2. componentDidMount：在组件完成组件挂载后触发执行。
  3. componentWillReceiveProps：父组件重新渲染时，子组件的该生命周期会触发执行（注意：该生命周期函数在子组件第一次渲染时，不会触发执行）。
  4. shouldComponentUpdate：父组件重新渲染或者组件 state 数据发生变化时会触发执行，该生命周期函数相当于控制组件重新渲染的 "阀门"。可以返回 true 或者 false，当返回的数据是 true，组件会正常更新，当返回的数据是 false，组件不会更新。
  5. componentWillUpdate：组件更新、重新渲染前会触发执行。
  6. componentDidUpdate：组件完成更新后会触发执行。
  7. componentWillUnmount：组件将要卸载前触发执行。

2-3，旧版生命周期函数的执行路线

生命周期函数的执行路线一共有五条。

第一条：组件刚开始挂载时

  1. constructor()
  2. componentWillMount()
  3. render()
  4. componentDidMount()

第二条：父组件重新渲染时

  1. componentWillReceiveProps()
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. render()
  5. componentDidUpdate()

第三条：组件状态发生变更时（setState({})）

  1. setState()
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. render()
  5. componentDidUpdate()

第四条：组件强制更新时（forceUpdate()）

  1. forceUpdate()
  2. componentWillUpdate()
  3. render()
  4. componentDidUpdate()

第五条：组件被卸载时

  1. ReactDOM.unmountComponentAtNode()
  2. componentWillUnmount()

2-4，旧版生命周期函数代码示例

<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 = {carName1:'奔驰', carName2:'小黄车'}

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

		render(){
			return(
				<div>
					<div>我是A组件</div>
					<button onClick={this.changeCar}>换车</button>
					<B carName={this.state.carName1}/>
					<C carName={this.state.carName2}/>
				</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>
			)
		}
	}

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

		render(){
			console.log('C---render');
			return(
					<div>我是C组件，接收到的车是:{this.props.carName}</div>
			)
		}
	}
	
	//渲染组件
	ReactDOM.render(<A/>,document.getElementById('test'))
</script>

3，React 新版生命周期函数

3-1，新版生命周期函数图

 

3-2，新版生命周期函数单独讲解

  1. shouldComponentUpdate：同上。
  2. componentDidMount：同上。
  3. componentDidUpdate：同上。
  4. componentWillUnmount：同上。

getDerivedStateFromProps 生命周期需要注意以下几点：

  • 在初始挂载及后续更新时会被调用（更具体的看图即可）。
  • 该生命周期应该定义成类的静态方法。
  • 参数是 (props, state) ，props 是组件实例接收的 props，state 是当前组件实例的 state 对象。
  • 该生命周期应该返回一个对象或者 null。如果返回值是一个对象的话，这个对象能够用来更新 state，如果返回值是 null 则不更新任何内容。
  • 如果 state 的值在任何时候都取决于 props 的话，可以使用该生命周期函数。其他绝大部分情况很少用到。

getSnapshotBeforeUpdate 生命周期需要注意以下几点：

  • 该生命周期在组件更新，开始更新 DOM 和 refs 前进行调用（更具体的看图即可）。
  • 可以在该生命周期中获取组件重新渲染之前 DOM 的信息（例如，滚动位置）。
  • 此生命周期方法的返回值（snapshot 值或 null）将作为参数传递给 componentDidUpdate(prevProps, prevState, snapshot)。

3-3，新版生命周期函数代码示例

<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 'atguigu'
		}

		//组件挂载完毕的钩子
		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>

getSnapshotBeforeUpdate 的使用场景案例：

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

 

举报

相关推荐

React 组件的生命周期

react.jsjavascript前端

React组件生命周期

reactjs

React【组件生命周期 、组件生命周期_挂载、 组件生命周期_更新 、组件生命周期_卸载、表单_受控组件、表单_受控组件处理多个输入】(三)

课程设计java开发语言毕业设计ssm电影推荐系统

❤ React06-React 组件的生命周期

生命周期d3React.js前端开发

react native 组件生命周期变化

生命周期加载自动刷新Linux系统/运维

应用生命周期、页面生命周期、组件生命周期

微信小程序小程序前端

react——生命周期

react.js前端javascript数据生命周期系统/运维

React的生命周期？

react.jsjavascript前端

react的生命周期

开发语言java程序人生笔记

【React】生命周期

react.jsjavascript前端
0 条评论