react的useEffect

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