BFE.devAI解答 - React 代码题
16. useUpdateEffect()

为了实现useUpdateEffect()函数，我们需要使用到useEffect()和useRef()两个React Hook。

首先，我们来看一下useEffect()和useRef()的基本使用方法：

import { useEffect, useRef } from "react";

function App() {
  const countRef = useRef(0);

  useEffect(() => {
    // callback函数
    console.log("Effect ran");
  }, []);

  return (
    <div>
      <button
        onClick={() => {
          countRef.current++;
          console.log("Count: ", countRef.current);
        }}
      >
        Increment
      </button>
    </div>
  );
}

在上述示例中，我们定义了一个countRef引用，用于存储计数器的值。在useEffect()中，我们传入一个空数组作为第二个参数，这意味着这个副作用只会在首次渲染时运行一次。

接下来，我们来实现useUpdateEffect()函数：

import { useEffect, useRef } from "react";

function useUpdateEffect(effect, deps) {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      return effect();
    }
  }, deps);
}

export default useUpdateEffect;

在useUpdateEffect()中，我们首先创建了一个布尔类型的引用isFirstRender，并使用useRef()将其初始化为true。

在useEffect()中，我们检查isFirstRender.current的值。如果是首次渲染，我们将isFirstRender.current设置为false，表示已经不再是首次渲染。否则，我们调用传入的effect回调函数。

最后，我们导出useUpdateEffect()函数以便在其他组件中使用。

可以通过以下方式在组件中使用useUpdateEffect()：

import React from "react";
import useUpdateEffect from "./useUpdateEffect";

function App() {
  const [count, setCount] = React.useState(0);

  useUpdateEffect(() => {
    console.log("Effect ran");
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在上面的示例中，我们将useUpdateEffect()作为自定义的Hook在组件中使用。每当count发生变化时，useUpdateEffect()会在除了首次渲染外的其他渲染时运行回调函数。

这样，就实现了一个跳过首次渲染的useUpdateEffect()函数。