React中函数组件没有Class组件中的State和componentDitMount、componentDidUpdate等生命周期方法，不过可以通过React Hook实现。
使用State
1
2
3
4
5
6
7
8
9
10
import { useState } from 'react';
function ComponentA () {
const [count, setCount] = useState(0);
return (
<div>
{count}
<button onClick={setCount(count + 1)}>add</button>
</div>
);
}
useEffect
Effect Hook 可以实现componentDidMount、componentDidUpdate和componentWillUnmount的效果。默认情况下，useEffect会在第一次渲染之后和每次更新之后执行，可以使用第二个可选参数进行控制useEffect的执行时机和次数，。
componentDidUpdate
useEffect 第二个参数如果不写，初始化的时候会执行一次，还会监听所有state和props的变化。
1
2
3
4
5
6
import { useEffect } from 'react';
function ComponentA() {
useEffect(()=>{
console.log("每次更新后执行")
});
}
如果指定了第二个参数就会监听该值的变化。
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useEffect } from 'react';
function ComponentB() {
const [count, setCount] = useState(0);
useEffect(()=>{
console.log("componentDidUpdate: count值变化后执行");
},[count]);
return (
<div>
{count}
<button onClick={setCount(count + 1)}>add</button>
</div>
);
}
componentDidMount
useEffect 第二个参数传递一个空数组，这个Effect将不会重复执行，这样就可以达到componentDidMount的效果。
1
2
3
4
5
6
import { useEffect } from 'react';
function ComponentC() {
useEffect(()=>{
console.log("componentDidMount");
},[]);
}
componentWillUnmount
useEffect 还可以返回一个函数，这个函数会在组件被卸载时执行，这样就相当于componentWillUnmount的效果。
1
2
3
4
5
6
7
8
import { useEffect } from 'react';
function ComponentC() {
useEffect(()=>{
return ()=> {
console.log("componentWillUnmount");
}
},[]);
}