useEffect

useEffect是一个Effect Hook，常用于一些副作用的操作，在一定程度上可以充当componentDidMount、componentDidUpdate、componentWillUnmount这三个生命周期。

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

useEffect是一个神奇的函数，通过不同的组合搭配我们能够极大地精简原本类组件中的业务逻辑代码。useEffect接收两个参数，分别是要执行的回调函数、依赖数组。

如果依赖数组为空数组，那么回调函数会在第一次渲染结束后（componentDidMount）执行，返回的函数会在组件卸载时（componentWillUnmount）执行。
如果不传依赖数组，那么回调函数会在每一次渲染结束后（componentDidMount和componentDidUpdate）执行。
如果依赖数组不为空数组，那么回调函数会在依赖值每次更新渲染结束后（componentDidUpdate）执行，这个依赖值一般是state或者props。

受控组件的状态变化

在编写Input这样的受控组件时，我们常常需要在Props中的value值变化之后，联动更新存储实际数据的内部value值：

const defaultProps = {
  formData: {},
};

export function VCForm({ formData = defaultProps.formData }) {
  // ...
  const [innerFormData, setInnerFormData] = React.useState(formData);
  // ...

  // 当外部 Props 状态变化后，更新数据
  React.useEffect(() => {
    if (formData) {
      setInnerFormData(formData);
    }
  }, [formData]);
  // ...

  return (
    <Form
      value={innerFormDaat}
      onChange={(newData) => {
        setInnerFormData(newData);
      }}
    />
  );
}

这里需要注意的是，如果我们直接将默认值写在参数列表里，即 formData = {}；在外部参数未传入formData，那么会发现每次组件更新都会触发formData被分配到新的默认值，也就导致了该组件的无限重复更新。因此我们需要仿造类组件中defaultProps的做法，将defaultProps以静态外部变量的方式存储并赋值。

useLayoutEffect

useLayoutEffect也是一个Hook方法，从名字上看和useEffect差不多，他俩用法也比较像。在90%的场景下我们都会用useEffect，然而在某些场景下却不得不用useLayoutEffect。useEffect和useLayoutEffect的区别是：

useEffect不会block浏览器渲染，而useLayoutEffect会。
useEffect会在浏览器渲染结束后执行，useLayoutEffect则是在DOM更新完成后，浏览器绘制之前执行。

const moveTo = (dom, delay, options) => {
  dom.style.transform = `translate(${options.x}px)`;
  dom.style.transition = `left ${delay}ms`;
};

const Animate = () => {
  const ref = useRef();
  useEffect(() => {
    moveTo(ref.current, 500, { x: 600 });
  }, []);

  return <div ref={ref}>方块</div>;
};

在useEffect里面会让这个方块往后移动600px距离，可以看到这个方块在移动过程中会闪一下。但如果换成了useLayoutEffect呢？会发现方块不会再闪动，而是直接出现在了600px的位置。原因是useEffect是在浏览器绘制之后执行的，所以方块一开始就在最左边，于是我们看到了方块移动的动画。然而useLayoutEffect是在绘制之前执行的，会阻塞页面的绘制，所以页面会在useLayoutEffect里面的代码执行结束后才去继续绘制，于是方块就直接出现在了右边。那么这里的代码是怎么实现的呢？以preact为例，useEffect在options.commit阶段执行，而useLayoutEffect在options.diffed阶段执行。然而在实现useEffect的时候使用了requestAnimationFrame，requestAnimationFrame可以控制useEffect里面的函数在浏览器重绘结束，下次绘制之前执行。

useInterval

function Counter() {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  return <h1>{count}</h1>;
}
import { useEffect, useRef } from "react";

/* istanbul ignore next */
/** keep typescript happy */
const noop = () => {};

export function useInterval(
  callback: () => void,
  delay: number | null | false,
  immediate?: boolean
) {
  // Remember the latest callback:
  //
  // Without this, if you change the callback, when setInterval ticks again, it
  // will still call your old callback.
  //
  // If you add `callback` to useEffect's deps, it will work fine but the
  // interval will be reset.
  const savedCallback = useRef(noop);

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  });

  // Execute callback if immediate is set.
  useEffect(() => {
    if (!immediate) return;
    if (delay === null || delay === false) return;
    savedCallback.current();
  }, [immediate]);

  // Set up the interval.
  useEffect(() => {
    if (delay === null || delay === false) return undefined;
    const tick = () => savedCallback.current();
    const id = setInterval(tick, delay);
    return () => clearInterval(id);
  }, [delay]);
}

useInterval还能够来暂停、终止定时器。

useEffect

useEffect

受控组件的状态变化

useLayoutEffect

useInterval

Links