摘要

习惯使用了class来写组件，对于react hooks还是比较陌生。记录一下，如何使用useEffect()实现类似componentDidMount()、componentWillUnmount() 的效果。

官方文档

useEffect – React

语法

useEffect(setup, dependencies?)

两种情况：

1. dependencies为空

举个栗子：

useEffect(() => {
    // 类似componentDidMount()
    console.log('useEffect before return:')
    return () => {
      // componentWillUnmount()
      console.log('useEffect return:')
    }
}, [])

输出：

useEffect before return

在父组件中，改变渲染条件使组件被卸载

{
    num < 3 && <ReactHook num={num} />
}

输出：

useEffect return

小结：在useEffect(setup, dependencies)中的dependencies为空的情况下，useEffect()只有在组件初始化时执行一次，类似componentDidMount()。而return中的内容，在组件卸载时才执行，类似componentWillUnmount()

2. dependencies不为空

举个栗子：

const [num, setNum] = useState(0)
useEffect(() => {
    // 类似componentDidMount()
    console.log('useEffect before return.num:', num)
    return () => {
      // componentWillUnmount()
      console.log('useEffect return.num:', num)
    }
}, [num])

每次点击“+1”按钮，num值+1，输出如下：

// 初始化
useEffect before return.num: 0
// 第一次点击
useEffect return.num: 0
useEffect before return.num: 1
// 第二次点击
useEffect return.num: 1
useEffect before return.num: 2
// 第三次点击
useEffect return.num: 2
useEffect before return.num: 3

小结：可以看到，除了初始化的一次打印。每次num+1，return先执行，然后return外面的执行，整个过程类似组件卸载又重新加载，但是组件状态num保留。