React学习笔记 - 生命周期(旧)
因为我之前学习过Vue,我可以将React中的生命周期与Vue联合在一起,所谓生命周期,它都是一个过程,一些函数,它所代表的是组件从创建到死亡它会经历一些特定的阶段。React,组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件的时候,可以在这些特定的生命周期回调函数中,做特定的工作,如:请求数据,修改数据,数据校验等….
简单来讲,React中的生命周期基本可以分为三个阶段: 初始化阶段 –> 数据更新阶段 –> 组件卸载阶段
生命周期(旧)
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.componentWillMount()
3.render() 常用
4.componentDidMount() 常用
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.shouldComponentUpdate(nextProps, nextState)
2.componentWillReceiveProps()(用于子组件)
3.componentWillUpdate()
4.render() 数据刷新,页面重新渲染
5.componentDidUpdate(preProps,preState)
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount() 常用
|
案例展示
- 要求:父子组件间传值,子组件可以通过输入框来提交数据给父组件,父组件进行数据展示,但是要通过生命周期的进行数据判断,如果传相同的值则不再重新渲染页面,在父组件中的数据展示的样式是以定时器的方式渐变淡,再变深,点击销毁生命周期来停止定时器
import React, { Component } from 'react'
class Son extends Component{
state={
opacity:1,
name:"lam"
}
render() {
return (
<div>
<p>-------------子组件---------------</p>
<p>
父组件传过来的名字:
<span style={{opacity:this.state.opacity}}>
{this.props.sendName}-{this.state.name}
</span>
</p>
</div>
)
}
UNSAFE_componentWillMount(){
this.timer = setInterval(()=>{
if(this.state.opacity >= 0){
this.setState({
opacity : this.state.opacity - 0.1
})
}else{
this.setState({
opacity : 1
})
}
},100)
}
UNSAFE_componentWillReceiveProps(nextProps){
console.log('[更新]componentWillReceiveProps:子组件接收到父组件传过来的新数据:',nextProps);
console.log('[更新]componentWillReceiveProps:子组件接收到父组件传过来的旧数据:',this.props.sendName);
this.setState({
name:nextProps.sendName+'生命周期加工'
})
}
componentWillUnmount(){
console.log('[卸载]componentWillUnmount:组件即将被消除,关闭定时器(渐变效果)');
clearInterval(this.timer)
}
}
export default class Father extends Component {
myName = React.createRef()
state = {
name:'lam',
isShowSon:true,
}
render() {
console.log('[页面初始化或数据更新]:页面渲染!');
return (
<div>
<p>---------------父组件---------------</p>
<input ref={this.myName} id="myname"/>
<button onClick={this.sendSon}>提交给子组件</button>
{/* 通过标志位判断是否展示子组件 */}
{this.state.isShowSon && <Son sendName={this.state.name}></Son>}
<button onClick={this.death}>销毁(关闭渐变展示)</button>
</div>
)
}
sendSon = ()=>{
console.log('获取到父组件的输入数据',this.myName.current.value);
this.setState({
name:this.myName.current.value,
})
this.myName.current.value = ''
}
death = ()=>{
this.setState({
isShowSon:false
},()=>{
console.log('修改成功!当前状态为:',this.state.isShowSon);
})
}
UNSAFE_componentWillMount(){
console.log('[初始化]componentWillMount,此时可以读取state中的数据:',this.state.name);
console.log('[初始化]componentWillMount,但是无法获取dom结构',document.querySelector('#myname'));
}
componentDidMount(){
console.log('[初始化]componentDidMount,此时可以获取dom结构',document.querySelector('#myname'));
console.log('[初始化]componentDidMount,此时可以发送网络请求获取数据类似Vue中的Mounted');
}
shouldComponentUpdate(nextProps, nextState){
console.log('数据更新的最新数据',nextState);
if(this.state.name === nextState.name){
console.log('[更新]shouldComponentUpdate:最新的输入数据与原来的数据相同,页面不用重新渲染!');
return false
}
console.log('[更新]shouldComponentUpdate:最新的输入数据与原来的数据不同,页面需要重新渲染!');
return true
}
UNSAFE_componentWillUpdate(nextProps, nextState){
console.log('[更新]componentWillUpdate:新的数据>',nextState);
}
componentDidUpdate(preProps,preState){
console.log('[更新]componentDidUpdate:数据更新前为(旧数据):',preState);
console.log('[更新]componentDidUpdate:此时数据已经更新完成',);
}
}
|
结果展示:
重要的生命周期函数
render：初始化渲染或更新渲染调用componentDidMount: 开启监听, 发送网络请求等..componentWillUnmount: 做一些收尾工作, 如: 清理定时器
即将废弃的生命周期函数
问题所在：
componentWillMount
- 在
ssr中 这个方法将会被多次调用， 所以会重复触发多遍，同时在这里如果绑定事件， 将无法解绑，导致内存泄漏 ， 变得不够安全高效逐步废弃。
componentWillReceiveProps
- 外部组件多次频繁更新传入多次不同的
props，会导致不必要的异步请求
componentWillUpdate
- 更新前记录
DOM 状态, 可能会做一些处理，与componentDidUpdate相隔时间如果过长， 会导致 状态不太信
在16.8版本后使用这些生命周期函数会出现警告，需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。
