javascript - 这是检测反应组件中第一次渲染的正确方法

Question

我有一个场景，我需要检测组件的第一次渲染。这里我建立了一个小例子。有人可以向我解释正确的方法是什么吗？

为什么大多数人建议使用 aref而不是普通状态。

https://codesandbox.io/s/condescending-burnell-0ex3x?file=/src/App.js

import React, { useState, useRef, useEffect } from "react";
import "./styles.css";

export default function App() {
  const firstRender = useDetectFirstRender();
  const [random, setRandom] = useState("123");
  useEffect(() => {
    if (firstRender) {
      console.log("first");
    } else {
      console.log("second");
    }
  }, [random]);
  return (
    <div className="App">
      <h1>Random Number is {random}</h1>
      <button onClick={() => setRandom(Math.random())}>Change Name</button>
    </div>
  );
}

//Approach 1
// export function useDetectFirstRender() {
//   const firstRender = useRef(true);

//   useEffect(() => {
//     firstRender.current = false;
//   }, []);

//   return firstRender.current;
// }

//Approach 2
export function useDetectFirstRender() {
  const [firstRender, setFirstRender] = useState(true);

  useEffect(() => {
    setFirstRender(false);
  }, []);

  return firstRender;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您可以使用 useMemo 或 useCallback 挂钩检测并保存它。但这里最可取的是 useMemo ，因为它会一次又一次地阻止相同的渲染。

const firstRender = useMemo(
    () =>console.log('first Render'),
    []
  );

在这里它将渲染一次并在第一个渲染中保存值，因此您可以在需要的任何地方使用它。

Answer 2

最直接的方法是使用useRef.

const useFirstRender = () => {
  const ref = useRef(true);
  const firstRender = ref.current;
  ref.current = false;
  return firstRender;
};

Answer 3

const firstRender = useRef(true);

useEffect(() => {
if (firstRender.current) {
  firstRender.current = false;
  return;
}

doSomething()

});