react的useEffect

原创已于 2022-04-08 13:38:15 修改 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react useEffect

于 2022-04-08 10:41:33 首次发布

react 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了React Hooks中的useEffect和useLayoutEffect。useEffect作为Vue中watch的替代，用于监听数据变化并在渲染后执行。它可以按需配置，如只运行一次或根据依赖变化执行。同时，useEffect提供了清除功能，避免内存泄漏。而useLayoutEffect则在所有DOM变更后同步调用，确保在浏览器绘制前完成更新。了解这些细节对于优化React应用性能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react useEffect

useEffect类似vue中的watch侦听器，监听数据变化。会在浏览器绘制后延迟执行，但会保证在任何新的渲染前执行。

useEffect常用的几种情况：

1.只要页面更新就触发回调：

  useEffect(() => {
      // 搞事情
  })

2.只运行一次（组件挂载和卸载时执行），第二个参数传空数组[]：

  useEffect(() => {
      // 搞事情
  },[])

3.条件执行，第二个参数传值，可以是多个数据源的数组，当依赖的数据源发生改变时，执行回调：

  useEffect(() => {
      // 搞事情
  },[source1,source2...])

useEffect的清除

组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点，useEffect 函数需返回一个清除函数。

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});

为防止内存泄漏，清除函数会在组件卸载前执行。另外，如果组件多次渲染（通常如此），则在执行下一个 effect 之前，上一个 effect 就已被清除。

useLayoutEffect

useEffect是在浏览器绘制之后执行。

useLayoutEffect是在所有的 DOM 变更之后同步调用，可以使用它来读取 DOM 布局并同步触发重渲染，在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。（DOM变更之后，浏览器绘制之前）

看看vue3的watch