即使组件重新渲染，输入值如何保持不变？答案

【问题标题】：How does input value stay same even though component re-render?即使组件重新渲染，输入值如何保持不变？
【发布时间】：2021-10-06 15:25:13
【问题描述】：

我有一个非常基本的反应组件，如下所示。据我所知，每次状态值更改时，此组件都会重新渲染。但是我想知道的是，如果每次我在输入字段中输入内容时组件都会重新渲染，为什么输入值保持不变而不是返回空值？

import React, { useState } from "react";

const InputExample = () => {
  const [value, setValue] = useState("");
  console.log("render");
  return (
    <>
      <input type="text" onChange={(e) => setValue(e.target.value)} />
    </>
  );
};

export default InputExample;

【问题讨论】：

标签： javascript reactjs react-component

【解决方案1】：

您将重新渲染与重新初始化混淆了。重新渲染只是更新 DOM 以反映状态的变化。这并不意味着组件被重新创建并分配了它开始时的初始状态。

在这种情况下，每当输入发生更改时，值变量都会根据输入元素中输入的内容进行更新。

【讨论】：

【解决方案2】：

因为 value 没有设置，所以它被认为是“不受控制的”并执行默认的 html 行为。为了将其保留为空值，您必须执行以下操作：

import React, { useState } from "react";

const InputExample = () => {
  const [value, setValue] = useState("");
  console.log("render");
  return (
    <>
      <input type="text" onChange={(e) => setValue(e.target.value)} value="" />
    </>
  );
};

export default InputExample;

【讨论】：