【React】useEffect——如何让函数式组件也能使用componentDidMount、componentDidUpdata和componentDidUnmount

最新推荐文章于 2024-06-15 12:23:02 发布

fangyuan__

最新推荐文章于 2024-06-15 12:23:02 发布

阅读量312

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/fangyuan__/article/details/139033240

版权

那些不涉及计算的操作（比如生成日志、储存数据、改变应用状态等等），函数式编程将其称为 “副效应” （side effect）。由于副效应非常多，所以钩子有许多种。React 为许多常见的操作（副效应），都提供了专用的钩子。

useState()：保存状态
useContext()：保存上下文
useRef()：保存引用
…
上面这些钩子，都是引入某种特定的副效应，而 useEffect()是通用的副效应钩子。找不到对应的钩子时，就可以用它。其实，从名字也可以看出来，它跟副效应（side effect）直接相关。

React.useEffect(() => {
    console.log('被调用了');
})

当我们像上面代码那样使用时，它相当于 componentDidUpdata 和 componentDidMount 一同使用，也就是在组件挂载和组件更新的时候都会调用这个函数

它还可以接收第二个参数，这个参数表示它要监测的数据，例如

React.useEffect(() => {
    console.log('被调用了');
}, [count])

这么写代表只监视 count 数据的变化

React.useEffect(() => {
    console.log('被调用了');
    return () => {
        console.log('我要被卸载了');
    }
}, [count])

像上面，通过return函数来实现组件卸载前会进行什么操作

关注