React-Hooks中的useEffect 代替常用生命周期函数

使用（

componentDidMount 、componentDidUpdate

）生命周期结果如下：

关键代码：

componentDidMount(){
console.log(`componentDidMount---the count num is ${this.state.count} `)
}
componentDidUpdate(){
console.log(`componentDidUpdate--the count num is ${this.state.count} `)
}

完整代码：

import React, { Component } from 'react';
class Example extends Component{
constructor(props){
super();
this.state={
count:0
}
}
addNum = () =>{
this.setState({
count:this.state.count + 1
})
}
componentDidMount(){
console.log(`componentDidMount---the count num is ${this.state.count} `)
}
componentDidUpdate(){
console.log(`componentDidUpdate--the count num is ${this.state.count} `)
}render(){
return(
<div>
<p>this num is {this.state.count}</p>
<button onClick={this.addNum}>click me</button>
</div>
)
}
}
export default Example;

使用useEffect 如下：

关键代码：

useEffect(() =>{
console.log(`effect ----the count is ${count}`)
})

完整代码：

import React, { useState,useEffect } from 'react';

function Example (){
const [count,setCount] = useState(0);
useEffect(() =>{
console.log(`effect ----the count is ${count}`)
})return(
<>
<p>the num is {count}</p>
<button onClick={()=>{setCount(count+1)}}>click me </button>
</>
)
}
export default Example;

总结：
（1）React首次渲染和之后的每次渲染都会调用 useEffect 函数。而之前我们要使用两个生命周期函数

componentDidMount

（首次渲染） 和

componentDidUpdate

（重新渲染）
（2）useEffect 中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数的执行时异步的。 而

componentDidMount

和

componentDidUpdate

中的代码都是同步执行的。

• 点赞
• 收藏
• 分享
• 文章举报

q2018753540 发布了22 篇原创文章 · 获赞 0 · 访问量 463 私信 关注