哪个是检测反应组件中第一次渲染的正确方法

Question

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

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

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>

原文由 Deepak Kumar Padhy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以基于 useRef 创建一个可重用的 自定义挂钩。

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

原文由 Piotr Siupa 发布，翻译遵循 CC BY-SA 4.0 许可协议