useEffect有关的一些问题

思考题

useEffect中的return语句 什么时候执行

• 带有依赖参数的,则依赖参数中的值发生变化之前,会执行一次
• 不带有依赖参数,则组件卸载之前,会执行一次。

Demo验证上述结论

import { useEffect, useState } from 'react';
import { Button } from 'antd';

export default function TestUpdateDemo() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 页面上count 值为3，此时取的count为2,也就是count值发生变化之前,这里会调用一次,如果这样子写.
    return () => {
      console.log('执行了销毁函数', count);
    };
  }, [count]);

  useEffect(() => {
    // 这种写法就只有组件卸载的时候才会执行
    return () => {
      console.log('执行了销毁:无依赖:');
    };
  }, []);
  const clickFn = () => {
    setCount((count) => count + 1);
  };
  return (
    <div>
      <h1>{count}</h1>
      <Button onClick={clickFn}>自增+1</Button>
    </div>
  );
}

更新阶段才执行的hooks

import { useRef } from 'react';
import type { useEffect, useLayoutEffect } from 'react';

type EffectHookType = typeof useEffect | typeof useLayoutEffect;

export const createUpdateEffect: (hook: EffectHookType) => EffectHookType =
  (hook) => (effect, deps) => {
    const isMounted = useRef(false);

    // for react-refresh
    hook(() => {
      return () => {
        isMounted.current = false;
      };
    }, []);

    hook(() => {
      if (!isMounted.current) {
        isMounted.current = true;
      } else {
        return effect();
      }
    }, deps);
  };

export default createUpdateEffect;

使用方法如下: 可以看到,只有count值发生变化了后, 回调函数才会执行。

const newEffect = createUpdateEffect(useEffect);
  const [count, setCount] = useState(0);
  newEffect(() => {
    console.log('count值发生变化');
  }, [count]);

  const clickFn = () => {
    setCount((count) => count + 1);
  };
  return (
    <div>
      <h1>{count}</h1>
      <Button onClick={clickFn}>自增+1</Button>
    </div>
  );