javascript - 防止 useEffect Hook 在 ComponentDidMount() 上运行

Question

此代码在 name 更改时运行(应该如此)，但它也会在组件首次加载时运行。我怎样才能让它仅在 name 的后续更改时运行，而不是在第一次设置默认值时运行？

const [name, setName] = useState('');

useEffect(() => {
  alert('Hi ' + name);
}, [name]);

Answer 1

使用 ref 您可以跟踪第一次渲染，在第一次渲染后设置为 false。

const firstRenderRef = useRef(true);
const [name, setName] = useState('');

useEffect(() => {
  if (firstRenderRef.current) {
    firstRenderRef.current = false;
  } else {
    alert('Hi ' + name);
  }
}, [name]);

不过我会将其纳入自定义 Hook

const useSkipFirstEffect = (callback, dependencies) => {
  const firstRenderRef = useRef(true);

  useEffect(() => {
    if (firstRenderRef.current) {
      firstRenderRef.current = false;
    } else {
      callback();
    }
  }, [callback, ...dependencies]);
};

用法:

useSkipFirstEffect(() => {
  alert('SkipFirstEffect: Hi ' + name);
}, [name]);