跟踪使用 useRef() 渲染组件的次数 - React

首先让我们想想初学者如何尝试解决这个问题。

如果您愿意，可以按照以下步骤操作，创建一个新的 React 项目，并将这么多代码放入您的 App.jsx 或您选择的任何组件中，并删除 index.css 和 App.css 中的所有内容：

import { useState } from "react";

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

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onclick="{handleRender}">Force Render</button>
    </div>
  );
}

export default App;

现在预览如下：

在上面的代码中，我创建了一个名为 count 的状态变量，单击按钮时该变量会增加 1。这里的计数是一个额外的状态变量，它在这里不做任何事情，但它会帮助您更好地理解事情。如果您以前在 React 中编写过代码，那么这段代码不应该让您感到不知所措。

那么，让我们进入主要部分......

1. 使用状态变量

这是我们大多数人想到的第一种方法，例如创建一个状态变量，将其初始化为 0，并在每次组件渲染时将其递增 1。

您的应用程序组件将如下所示：

function App() {
  const [count, setCount] = useState(0);
  const [numberOfTimesRendered, setNumberOfTimesRendered] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
    setNumberOfTimesRendered(numberOfTimesRendered + 1);
  };

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onclick="{handleRender}">Force Render</button>
    </div>
  );
}

这种方法在这里可以很好地工作，但它有很多缺陷。理想情况下，当我们单击“强制渲染”按钮时，组件不会仅渲染一次。当我们单击按钮时，计数值会增加 1，这会导致组件重新渲染，因为我们都知道任何状态变量的更改都会导致组件重新渲染。但在 setCount(count 1) 重新渲染后确实到此结束，setNumberOfTimesRendered(numberOfTimesRendered 1) 会被触发并导致组件再次渲染。

numberOfTimesRendered 值增加 1，但每次我们单击“强制渲染”按钮时，组件都会渲染两次，这说明了为什么在这种情况下使用状态变量不是最好的方法，而是最差的方法。

2. 使用全局变量

人们可以想到的另一种方法是在组件生命周期之外定义一个全局变量，并在组件重新渲染时将其加 1，如下所示：

let numberOfTimesRendered = 0;

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

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onclick="{handleRender}">Force Render</button>
    </div>
  );
}

这种方法可以正常工作，并且不会导致任何额外的渲染，这似乎是最好的解决方案，但事实并非如此，因为您不应该在组件生命周期之外定义任何内容。

3. 使用局部变量

人们也可以想到与上面相同的方法，但在组件内部使用局部变量，但让我告诉你，没有比这更糟糕的方法了，因为每次组件渲染时，局部变量都会重新初始化为 0并且我们每次都会丢失之前的渲染。

4. 使用 useRef() 钩子

现在让我们使用 useRef() 来实现它。

我们大多数人都知道 useRef 是一个钩子，用于引用 dom 内的元素并手动操作它们，但 useRef 不仅限于此。它还可以保存值，并可用于在组件渲染生命周期中保持变量的持久性。

如果您在 useRef 中存储一个值，它将不会受到 React 组件渲染生命周期的影响，该值将在任何数量的重新渲染中保持持久性。实现将如下所示：

import { useState } from "react";

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

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onclick="{handleRender}">Force Render</button>
    </div>
  );
}

export default App;

numberOfTimesRendered.current 给出存储在引用变量中的当前值。这种方法不会导致任何额外的重新渲染，并不是说它是最好的，而是据我所知是最优化的方法之一。

---

本文到此结束。欢迎反馈，如果您需要进一步说明，请在下面发表评论，我会尽力帮助您。

在 X 和 LinkedIn 上与我联系！？✨

以上是跟踪使用 useRef() 渲染组件的次数 - React的详细内容。更多信息请关注PHP中文网其他相关文章！