想要在屏幕上顯示增量計數器值

Question

在不重新渲染的情況下，組件需要在屏幕上顯示增量值（changes.current）。 單擊按鈕時，會發生增量，它會顯示在控制台上但不會更改屏幕上的值。 我們需要顯示增量值（changes.current）。 我也嘗試過使用document.getElementById("p_id")但它不起作用。

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

export default function App() {
  let changes = useRef(0);
  const changingValue = () => {
    changes.current++;
    //To print on console
    console.log("New Value: " + changes.current);
  };
  // Statement to check the rerendering happening or not
  console.log("rendering not happening");

  return (
    <div className="App">
      {/* Button for click */}
      <button onClick={changingValue}>
        <b>Click me</b>
      </button>
      <p id='p_id'>{changes.current}</p>
    </div>
  );
}

預期：更新后的值應在單擊按鈕時顯示：在此處輸入圖像描述`

Answer 1

改變 React ref 不會觸發組件重新渲染。 React 組件由於以下 3 個原因之一而重新渲染：

1. React 組件 state 已更新。
2. 通過的道具已更新。
3. 父組件重新渲染（因為它的 state 或道具已更新）。

更新一些本地 state 將觸發重新渲染。

例子：

import React, { useEffect, useState } from "react";

export default function App() {
  const [changes, setChanges] = useState(0);

  const changingValue = () => {
    // Enqueue state update to increment the current
    // state value by 1, trigger rerender
    setChanges(c => c + 1);
  };

  useEffect(() => {
    console.log(changes);
  }, [changes]);

  return (
    <div className="App">
      <button type="button" onClick={changingValue}>
        <b>Click me</b>
      </button>
      <p>{changes}</p>
    </div>
  );
}

您可以繼續在 React ref 中存儲您喜歡的任何值，但為了查看任何更新的值，組件必須重新渲染，以便更新的 UI 可以刷新到 DOM。