React JS 中的 value 和 defaultValue 之间的真正区别是什么？

Question

在 React 的主页上，有最后一个示例（使用外部插件的组件），带有textarea：

    <textarea
      id="markdown-content"
      onChange={this.handleChange}
      defaultValue={this.state.value}
    />

当我输入时，textarea会更新。

现在，我试图改变defaultValue有value：

    <textarea
      id="markdown-content"
      onChange={this.handleChange}
      value={this.state.value}
    />

结果是相同的（与 一样defaultValue，即当我输入时，textarea更新后的文本会在视觉上得到更新）。

那么，两者之间的真正区别是什么？

Answer 1

我认为一个很好的例子是如果您使用硬编码字符串

使用 defaultValue 属性：

function App(){ 
  return(
    <textarea
      defaultValue="foo" // only by default foo
    />
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

使用价值道具

function App(){ 
  return(
    <textarea
      value="foo" // will forever be foo
    />
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

因此，虽然本段下面的代码片段可能看起来与使用 prop 相同，value因为onChange可能会更新状态值（因此看起来像是正在更新defaultValueprop），但事实并非如此。它仍然是一个不受控制的组件，将直接根据用户输入更新其值。this.state.value它只是使用最初渲染时的默认值进行初始化。

<textarea
  id="markdown-content"
  onChange={this.handleChange}
  defaultValue={this.state.value}
/>

Answer 2

只要您更改其中使用的值，value就不会有任何差异。如果您不更新变量并设置了文本区域值，则无法通过键入来更改文本区域的值。通过使用defaultValue，您不必更新任何变量。