我认识的useEffet

最新推荐文章于 2024-07-27 09:09:30 发布
最新推荐文章于 2024-07-27 09:09:30 发布
阅读量667 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ganlubaba666/article/details/106929805
版权

引入：什么是Hook

Hook 是什么？ Hook 是一个特殊的函数，它可以让你**“钩入” React 的特性**。它们名字通常都以 use 开始。

例如，useEffect 是允许你在 React 函数组件中添加 "effect" 的 Hook。

基本使用

useEffect接受两个参数，第一个参数为"effect"函数，第二个参数为依赖项数组，是可选参数。

"effect"函数：在"effect"中，进行一些副作用的操作。如果副作用的操作需要清除，"effect"可以返回一个函数。每次要执行更新的"effect"之前，都会先执行这个函数，进行副作用的清除工作。

依赖项数组：如果依赖数组中的项在两次重渲染之间没有发生变化，你可以通知React跳过对"effect"的调用。

  • 依赖项数组为空数组，那么"effect"只会执行一次。因为你的"effect" 不依赖于 props 或 state中的任何值，所以它永远都不需要重复执行。
  • 如果依赖项数组没有填写，那么"effect"每次渲染都执行

应用&场景（如何使用useEffect替代生命周期函数）

在探讨useEffect的应用之前，我们可以先看一下下面这张react的生命周期图。

众所周知，render 函数是不应该有任何副作用的。因为在这里执行操作太早了，我们基本上都希望在render后才执行我们的操作。

由图可知， componentDidMount，componentDidUpdate 都是在render后执行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lGoZkO8j-1592908559641)(images/我理解的useEffect.png)]

而useEffect会在每次render后执行。

因此在此处，我们可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 这两个函数的组合，它的作用是在函数中执行副作用。让我们看看以下三个场景。

场景一：页面初始化

在第一次渲染之后发起一个ajax请求获取数据。

  componentDidMount() {
      //发起请求
  }
	
	||
    
  useEffect(()=>{
    //发起请求
  },[])
场景二：每次渲染后，更新document.title，
 function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
     document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

  componentDidMount() {
        document.title = `You clicked ${this.state.count} times`;
    }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

    ||

  useEffect(() => {
      document.title = `You clicked ${count} times`;
 	});
场景三：每次渲染后，只根据某个变量的值来进行更新
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      document.title = `You clicked ${this.state.count} times`;
    }
  }

  ||

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅在 count 更改时更新

以上三种场景都是不需要清除的副作用。

而副作用有两种

  • 不需要清除的副作用。例如数据获取，设置订阅以及手动更改 React 组件中的DOM。
  • 需要清除的副作用。例如订阅外部数据源。

对于需要清除的副作用来说，useEffect相当于 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

场景四：订阅外部数据源。

如果**friend prop**发生变化，我们必须取消之前的订阅，再订阅新的数据源。

 //以下的场景为：组件第一次渲染后订阅数据源，friend prop发生变化时取消订阅。
 	componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate(prevProps) {
    // 取消订阅之前的 friend.id
    ChatAPI.unsubscribeFromFriendStatus(
      prevProps.friend.id,
      this.handleStatusChange
    );
    // 订阅新的 friend.id
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
	
		||
      
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
场景五： 每次渲染后，更新document.title,同时更新订阅
 componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
    // 取消订阅之前的 friend.id
    ChatAPI.unsubscribeFromFriendStatus(
      prevProps.friend.id,
      this.handleStatusChange
    );
    // 订阅新的 friend.id
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
	||
	useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

相比生命周期函数的优势

  1. 多个useEffect实现关注点分离：如场景五，useEffect相当于和componentDidMount和componentDidUpdate和componentWillUnmount这三个函数的组合 ，它既可以把分散在多个生命周期的相关代码聚合在一个useEffect中，也可以把聚合在一个生命中期的无关代码分散在多个useEffect当中。

    并且代码中的useEffect会按书写顺序由上而下的执行。每个"effect"返回的清除函数在下次的"effect"执行之前，也会由上到下的执行。

    场景：屏幕中有一个按钮，count的初始值为0，点击按钮之后，count的数目会加一。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rNehlZ6a-1592908559645)(images/image-20200622134005225.png)]

 function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('先执行的逻辑1',count);
    return ()=>{
      console.log('逻辑1的副作用要先被清除了');
    }
  },[count]);
  useEffect(() => {
    console.log('后执行的逻辑2',count);
    return ()=>{
      console.log('逻辑2的副作用也要被清除了');
    }
  },[count]);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

下图为点击了一次按钮后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ANhR257b-1592908559646)(images/image-20200621163809279.png)]

  1. 与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 "effect" 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，"effect" 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。

踩的一些坑&注意事项⚠️

  1. 初始值就算是一个变量，也只能初始化一次
function App() {
  const [num,setNum] = useState(0);
  const [count, setCount] = useState(num);
  useEffect(() => {
    console.log(num)
    console.log(count);
  });
  return (
    <div>
      <button onClick={() => setNum(num + 1)}>
        Click me
      </button>
    </div>
  );
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aa79SwzW-1592908559648)(images/image-20200622153536732.png)]

  1. 出现死循环的问题

场景：你在useEffect中发起了一个请求，并且没有设置依赖项。并根据请求的结果改变了组件的状态。组件因为状态的改变重新渲染。由于你没有设置依赖项，所以在重新渲染后useEffect再次执行，形成了死循环。

  1. 不要欺骗依赖项

场景：设置一个定时器，并且在定时器不需要使用的时候进行清除。

一开始我们没有填写依赖项。企图在设置了定时器之后清除，但是由于没有依赖项，"effect"不会更新，

"effect"中的state和props是固化的，所以只是重复的进行setCount(0+1)的动作。又因为，清除的动作是在"effect"更新之前执行的，因此清除动作也不会执行。

useEffect(() => {
    const id = setInterval(() => {
      console.log('设置')
      setCount(count+1);
    }, 1000);
    return () => {
      console.log('清除')
      return clearInterval(id);
    }
  }, []);

如果我们填写了依赖项呢？

useEffect(() => {
    const id = setInterval(() => {
      console.log('设置')
      setCount(count+1);
    }, 1000);
    return () => {
      console.log('清除')
      return clearInterval(id);
    }
  }, [count]);

此时在count更新的过程中，会不断生成新的"effect"，因此会不断的设置和清除定时器，会造成一定的时差以及性能损耗。

那此时我们要怎么办呢 => 抽除依赖项count

此时的useEffect不再依赖count变量，它可以成功的设置定时器，并且进行count变量的更新。

useEffect(() => {
    const id = setInterval(() => {
      console.log('设置')
      setCount(c=>c+1);
    }, 1000);
    return () => {
      console.log('清除')
      return clearInterval(id);
    }
}, []);
  1. 不能用判断包裹useEffect
  1. 在effect里拿到的是旧的state或prop

Effect拿到的总是定义它的那次渲染中的props和state。

深入useEffect的原理

本文参考

react官方文档（使用 Effect Hook）

精读《useEffect 完全指南》

终于搞懂 React Hooks了！！！！！

React Hooks 详解 【近 1W 字】+ 项目实战

useEffect完整指南

ganlubaba666
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React + Ant Design 4 使用过程中问题搜集
FreedomX20的博客
04-16 6175
React 和 Ant Design 使用过程中问题搜集
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇
m0_59529616的博客
08-03 913
★★★ React 事件绑定原理 ★★★ React中的 setState 缺点是什么呢 ★★★ React组件通信如何实现 ★★★ 类组件和函数组件的区别 ★★★ 请你说说React的路由是什么？ ★★★★★ React有哪些性能优化的手段？ ★★★★ React hooks 用过吗，为什么要用？ ★★★★ 虚拟DOM的优劣如何？实现原理？ ★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
useEffect使用详解
一步一个脚印，踏实努力，向着目标前进
08-24 7845
useEffect是React中的一个钩子函数，用于处理副作用操作。副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作，比如数据获取、订阅事件、操作DOM等。useEffect接受两个参数：一个是副作用函数，另一个是依赖数组。副作用函数会在组件渲染时执行，并且在每次组件更新后也会执行。如果依赖数组不为空，并且依赖数组中的值发生变化时，副作用函数也会被重新执行。如果依赖数组为空，则副作用函数只会在组件渲染时执行一次。以下是useEffect。
useEffect详解
IT_bar的博客
05-17 5万+
useEffect使用时有以下4种情况 1、不传递 useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。 //1 useEffect(()=>{ console.log(props.number) setNumber(props.number) }) //所有更新都执行 2、传递空数组 //2 useEffect(()=>{ console.log(
【React】useEffect 钩子详解
最新发布
lph159的博客
07-27 654
在类组件中，我们通常在生命周期方法中执行这些操作，而在函数组件中，我们使用。钩子是 React 16.8 版本引入的，它允许我们在函数组件中执行副作用操作。如果传递一个空数组作为依赖项，副作用函数只会在组件首次渲染时执行一次。会在每次组件渲染或更新时执行，而返回的清除函数会在组件卸载时执行。发生变化时，副作用函数会执行，同时会先执行上一次渲染中的清除函数。如果传递一个依赖项数组，副作用函数会在依赖项发生变化时执行。如果不传递依赖项数组，副作用函数会在每次渲染后执行。在一个组件中可以使用多个。
useEffect 完全指南
weixin_43484007的博客
04-23 1万+
1. 引言 工具型文章要跳读，而文学经典就要反复研读。如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章，那么 16.7 带来的 Hooks 就要像文学经典一样反复研读。 Hooks API 无论从简洁程度，还是使用深度角度来看，都大大优于之前生命周期的 API，所以必须反复理解，反复实践，否则只能停留在表面原地踏步。 相比 useState 或者自定义 Hooks 而言，最有理解难度的是 useEffect 这个工具，希望借着a-complete-guide-to-useeffect
useEffect使用指南
热门推荐
大灰狼的小绵羊哥哥的博客
07-02 6万+
最近在写一些React的应用，用上了最新的Hooks。Hooks好用，但是对于刚上手Hooks的小伙伴来说，坑也挺多的。所以决定总结一下Hooks的使用经验，从useEffect开始。useEffect用于处理组件中的effect，通常用于请求数据，事件处理，订阅等相关操作。这里以数据请求为例，来深入介绍useEffect的用法。 最基本的使用 首先，举一个简单的例子： import Re...
useEffect 完整使用指南
qq_49900295的博客
09-25 5516
我们用 useCallback 对 getFetchUrl 做了一层缓存，现在只有当依赖项变化的时候，才会重新执行 useCallback 来返回新的函数，依赖项没有变化的时候就算组件 rerender 了，这个函数也不会重新执行，这样我们把 getFetchUrl 作为 useEffect 的依赖就没问题了。这当然不是我们想要的。在下面这个组件中，我们的直觉是：“开启一次定时器，清除也是一次”。我们对 React 撒谎说我们的 effect 不依赖组件内的任何值，可实际上我们的 effect 有依赖。
useEffect详情用法
qq_51130780的博客
07-15 1432
函数式组件中的useEffect的使用
useEffect使用
qq_45903688的博客
03-27 274
1.usEffect的组合 useEffect(fn，【？】) 当只传入一个函数和空数组【】时，只会在componentDidMount中 当只传入一个函数时，会在componentDidMount和componentDidUpdate中执行 当只传入一个函数和【】时，且函数返回另一个函数；fn会在componentDidMount中执行，返回的函数会在componentWillUnmount中执行。 ...
React - useEffect函数的理解和使用
qq_43886365的博客
08-11 4093
`useEffect` 是 `react v16.8` 新引入的特性。我们可以把 useEffect hook 看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个生命周期的组合。可以让你在函数式组件中执行一些副作用操作；
【React】945- 你真的用对 useEffect 了吗？
pingan8787
05-02 906
最近在公司搬砖的过程中遇到了一个bug，页面加载的时候会闪现一下，找了很久才发现是useeffect的依赖项的问题，所以打算写篇文章总结一下，希望对看到文章的你也有所帮助。1.什么是use...
关于useEffect使用的注意点
SupperSA的博客
10-17 259
useEffect的注意点，以及一些技巧
useEffect 基础介绍及使用
仙途路漫漫其修远兮
05-18 5489
react hooks useEffect基础介绍及使用描述
React useEffect 两个参数你用对了吗，这也许是最全的使用说明书
梅花寺
06-09 8774
3. 参数二：deps 第二个参数可以是 现象： useEffect 会在第一次渲染以及每次更新渲染后都执行。原因： 第一次渲染后执行一次useEffect，useEffect中回调函数改变state值，state值改变触发组件重新渲染，useEffect没有比较值，useEffect重新执行，useEffect中回调函数改变state值，state值改变触发组件重新渲染，无限循环。 现象： useEffect 会在第一次渲染后执行一次。原因： 第一次渲染后执行一次一次useEffect，useEffec
useEffect为函数组件添加“副作用”
Caleb的博客
07-13 343
你是不是也用过最新的Hooks了，Hooks虽然好用，但是对于刚上手Hooks的小伙伴来说，坑也挺多的。所以决定总结一下Hooks的使用经验，从useEffect开始。​ 副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）常见的副作用使用步骤讲述概念优点不好理解，直接上代码父组件 子组件...
LEARN_框架_React 使用 use Effect 和 useLayoutEffect 的区别
qq_36550828的博客
08-18 462
React 使用 use Effect 和 useLayoutEffect 的区别 useEffect 是每次 render 之后都会调用的函数，可以代替之前 class component 中的三个生命周期钩子。 作为 componentDidMount 使用，[] 作为第二个参数； 作为 componentDiUpdate 使用，可以指定依赖； 作为 componentWillUnmount 使用，通过 return 一个函数清除副作用； 以上三种用途可同时存在。 案例 要想知道一个组件什么时候第一次渲
useEffect Hook 是如何工作的(前端需要懂的知识点)
粉丝们务必加入微信粉丝群
09-06 3604
作者：Dave Ceddia译者：前端小智来源：daveceddia. 为了保证的可读性，本文采用意译而非直译。 想象一下:你有一个非常好用的函数组件，然后有一天，咱们需要向它添加一个生命周期方法。 呃… 刚开始咱们可能会想怎么能解决这个问题，然后最后变成，通常的做法是将它转换成一个类。但有时候咱们就是要用函数方式，怎么破？useEffect hook 出现就是为了解决这种情况。 使...
解决react@v18的useEffect函数执行两遍的问题
weixin_46787337的博客
07-09 3304
出现这样的问题如果给提供的依赖没问题的话，那么原因一定是使用了react的严格模式 不要用严格模式否则你会奔溃的！！！ 不要用严格模式，严格模式下会执行两遍严格模式是用于突出显示应用程序中潜在问题的工具，它不会呈现任何可见的UI。它只用于激活对其后代的额外检查和警告。严格模式不会影响生产环境，生产环境下useEffect还是执行一遍的。严格模式还篡改了console.log的执行，有时候你在debug的时候会非常疑惑，所以不要用严格模式 非要用严格模式怎么解决useEffect函数执行两遍的问题 定义一个r
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值