react Hooks之useEffect

秃头的小毛驴

已于 2023-12-08 11:57:33 修改

阅读量562

点赞数 7

文章标签： react.js 前端 javascript

于 2023-12-07 16:02:21 首次发布

本文链接：https://blog.csdn.net/weixin_48633811/article/details/134857381

版权

一：作用：

处理副作用操作：通过在 useEffect 的回调函数中执行副作用操作，例如发送网络请求、订阅事件、手动管理组件的生命周期等。
依赖管理：可以根据传入的依赖数组，在特定的依赖变化时触发 useEffect 的执行。这样可以控制副作用操作的触发时机，避免不必要的重复执行。
清理操作：通过在 useEffect 的回调函数中返回一个清理函数，可以在组件卸载前执行一些清理工作，如取消订阅、清除定时器等。
模拟生命周期方法：可以使用 useEffect 来模拟类组件的生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount 等

二、用法：

useEffect 接受两个参数：

回调函数：用于定义副作用操作的逻辑。回调函数会在每次组件渲染后调用。

依赖数组（可选）：用于指定 effect 所依赖的变量。只有当依赖数组中的变量发生变化时，才会重新执行 effect。如果省略依赖数组，则 effect 在每次组件更新后都会重新执行。

三、示例：

useEffect(() => {
  // 副作用操作代码
  // 返回清理函数（可选）
});

只写一个回调函数而没有指定依赖数组，那么每次组件渲染后都会触发这个回调函数。这意味着该回调函数会在组件挂载后以及每次组件更新后都执行。不推荐这么写。不可以这么写。

useEffect(() => {
    
    
  }, []);

这个依赖数组未空数组，表示加载该页面时，只执行一次，如果你学过vue，那么你可理解为他相当于vue的create阶段。

useEffect(() => {
    
  }, [a,b]);

这个依赖项为a和b。当a和b的值发生改变时，就会触发回调函数。可以理解为vue中的监听属性。

useEffect(() => {
    // 返回一个清理函数
    return () => {
      console.log('Component unmounted');
    };
  }, []);

通过返回一个清理函数，我们可以在组件卸载时执行一些清理操作，比如取消网络请求、清除定时器等。

关注