useRef() 如何在不重新渲染的情况下导致视图更改？

【问题标题】：How does useRef() cause a view change without a re-render?useRef() 如何在不重新渲染的情况下导致视图更改？
【发布时间】：2022-06-10 20:50:08
【问题描述】：

所以，我在下面有这个基本代码。

在代码中，当用户点击按钮时，它专注于输入字段并输入单词“test”。

由于状态从未改变，这是如何发生的？即由于没有发生“重新渲染” - 视图如何变化？

import { useRef } from "react";

const App = () => {
  const inputRef = useRef(null);
  const handleClick = () => {
    inputRef.current.focus();
    inputRef.current.value = "test";
  };

  return (
    <>
      <input ref={inputRef}></input>
      <button onClick={handleClick}>Click me!!</button>
    </>
  );
};

【问题讨论】：

• 输入不受控制，因为您没有提供任何 value 道具，并且焦点状态通常根本不受反应管理。所以不需要重新渲染。实际 DOM 中的输入元素本身会跟踪这些状态。

标签： javascript reactjs react-hooks use-ref