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()函数。