关于React组件中的生命周期
1、理解
- 组件从创建到死亡它会经历一些特定的阶段,生命周期就像一个人的生命一样,它是人从出生到老去的一个过程,在这个过程,我们会在合适的年龄做合适的事情,比如上学,工作等等
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。
2、生命周期流程图(旧)
2.1 组件生命周期
初始化阶段(由ReactDOM.render()触发---初次渲染
):constructor
>>> componentWillMount
>>> render
>>> componentDidMount
更新阶段(由组件内部this.setSate()或父组件重新render触发
):
- setState:
shouldComponentUpdate()
>>>componentWillUpdate()
>>>render()
>>>componentDidUpdate()
注:shouldComponentUpdate类似于一个开关,代码中没写这个生命周期,框架底层在执行的时候也会给你补上一个,而且返回值默认为true,当你写了shouldComponentUpdate这个钩子时,框架要求你必须写个返回值,返回值必须为布尔值,当返回值为true时,可往下执行;当返回值为false时,之后的钩子就都没有机会执行了
。 - forceUpdate:
componentWillUpdate()
>>>render()
>>>componentDidUpdate()
卸载阶段(由ReactDOM.unmountComponentAtNode()触发
):componentWillUnmount()
2.2 父子组件生命周期执行顺序
初始化阶段:父---componentWillMount()
>>> 父---render()
>>> 子---componentWillMount()
>>> 子---render()
>>> 子---componentDidMount()
>>> 父---componentDidMount()
更新阶段:父---shouldComponentUpdate()
>>> 父---componentWillUpdate()
>>> 父---render()
>>> 子---componentWillReceiveProps()
>>> 子---shouldComponentUpdate()
>>> 子---componentWillUpdate()
>>> 子---render()
>>> 子---componentDidUpdate()
>>> 父---componentDidUpdate()
卸载阶段:父---componentWillUnmount()
>>> 子---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">
/*
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() =====> 常用
一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息
*/
//创建组件
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:'奥拓'})
}
//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
//组件将要挂载的钩子
componentWillMount(){
console.log('父---componentWillMount');
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('父---componentDidMount');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('父---componentWillUnmount');
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('父---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('父---componentWillUpdate');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('父---componentDidUpdate');
}
render(){
console.log('父---render');
return(
<div>
<div>我是A组件</div>
<button onClick={this.changeCar}>换车</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button>
<B carName={this.state.carName}/>
</div>
)
}
}
//子组件B
class B extends React.Component{
//组件将要接收新的props的钩子
componentWillReceiveProps(props){
console.log('子---componentWillReceiveProps',props);
}
//组件将要挂载的钩子
componentWillMount(){
console.log('子---componentWillMount');
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('子---componentDidMount');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('子---componentWillUnmount');
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('子---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('子---componentWillUpdate');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('子---componentDidUpdate');
}
render(){
console.log('子---render');
return(
<div>我是B组件,接收到的车是:{this.props.carName}</div>
)
}
}
//渲染组件
// ReactDOM.render(<Count/>,document.getElementById('test'))
ReactDOM.render(<A/>,document.getElementById('test'))
</script>
</body>
</html>
3、生命周期流程图(新)
新增了getDerivedStateFromProps
和getSnapshotBeforeUpdate
两个钩子
getDerivedStateFromProps(props,state)
:
- 相当于componentwillmount 和 componentWillReceiveProps合并
- 主要是应用在于封装组件时调用,组件的state取决于props变化
- 每次render都会调用,无条件的根据 props来更新内部 state,也就是只要有传入 props值, 就更新 state;只有 props 值和 state值不同时才更新 state 值
- 尽量不使用,维护俩者状态需要消耗额外资源,增加复杂度
- 典型场景表单获取默认值
getSnapshotBeforeUpdate(prevProps,prevState)
:
- 替换componentWillUpdate函数,将参数返回并传递给componentDidUpdate周期函数
getSnapshotBeforeUpdate()
在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给componentDidUpdate(prevProps, prevState, snapshot)
。- 典型场景:获取render之前的dom状态
初始化阶段(由ReactDOM.render()触发---初次渲染)
:constructor()
>>> getDerivedStateFromProps()
>>> render()
>>> componentDidMount()
更新阶段(由组件内部this.setSate()或父组件重新render触发)
:
- setState:
getDerivedStateFromProps()
>>>shouldComponentUpdate()
>>>render()
>>>getSnapshotBeforeUpdate()
>>>componentDidUpdate()
- forceUpdate:
getDerivedStateFromProps()
>>>render()
>>>getSnapshotBeforeUpdate()
>>>componentDidUpdate()
卸载阶段(由ReactDOM.unmountComponentAtNode()触发)
: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{
/*
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() =====> 常用
一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息
*/
//构造器
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 'wwww'
}
//组件挂载完毕的钩子
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>
4、常用的重要钩子
- render:初始化渲染或更新渲染调用
- componentDidMount:开启监听, 发送ajax请求
- componentWillUnmount:做一些收尾工作, 如: 清理定时器
5、即将废弃的生命钩子
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
注:由于componentWillMount
、 componentWillReceiveProps
和 componentWillUpdate
这三个生命周期函数有缺陷,16.3版本后需要加上UNSAFE_前缀才能使用,再以后可能会被彻底废弃,不建议使用。