La tercera fase de la serie de ganchos escritos a mano, implementando ganchos comunes: useUpdateEffect

antecedentes

Este artículo es el tercer número de la serie de ganchos escritos a mano, la dificultad de este artículo: ⭐️.

Debido al mecanismo useEffect en React, useEffect se ejecutará durante el renderizado inicial, independientemente del escenario. Entonces, ¿cómo implementar el componente de clase componentDidUpdate?

Hoy lo llevaré a implementar una versión de componente funcional componentDidUpdate.

necesitar

Ahora se requiere implementar un gancho personalizado: useUpdateEffectDespués de la implementación, el uso específico es el useEffectmismo y el efecto es el componentDidUpdatemismo.

const Test = () => {
  const [num, setNum] = useState(0);

  useUpdateEffect(() => {
    console.log(num, "更新后的num");
  }, [num]);

  return (
    <div>
      {num}
      <button onClick={() => setNum(num + 1)}>add</button>
    </div>
  );
};
复制代码

Implementación de codificación

El primer paso: primero definir la estructura de entrada y salida.

export const useUpdateEffect: typeof useEffect = (effect, deps) => {
  useEffect(() => {
    return effect();
  }, deps);
};
复制代码

Paso 2: Procese el renderizado inicial, 这里的核心是判断初次渲染的时机，如果是初次渲染则不执行传入的effect函数.

Aquí puede usar useRefel método para determinar si es la primera representación.

export const useUpdateEffect: typeof useEffect = (effect, deps) => {
  const ref = useRef(true);

  useEffect(() => {
    if (ref.current) {
      ref.current = false; //如果是初次渲染则设置为false
    } else {
      return effect(); //再次渲染时再执行
    }
  }, deps);
};
复制代码

El tercer paso: optimización de código. De hecho, podemos extraer la lógica de si es la primera representación en un gancho público: useFirstMountStatepara que la lógica del código sea más clara.

export function useFirstMountState(): boolean {
  const isFirst = useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  }

  return isFirst.current;
}
复制代码

Después de la optimización useUpdateEffect:

export const useUpdateEffect: typeof useEffect = (effect, deps) => {
  const isFirstMount = useFirstMountState(); //是否是第一次渲染

  useEffect(() => {
    if (!isFirstMount) {
      return effect();
    }
  }, deps);
};
复制代码

Resumir

Todos los códigos involucrados en este artículo se colocan en la demostración en github. Si te sientes bien, dale me gusta, jejeje ❤️❤️❤️.

¡Le invitamos a dejar un mensaje en el área de comentarios y brindar mejores prácticas!