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

Question

在React的主页上，最后一个example（使用外部插件的组件）带有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

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

Answer 2

see demo image here

  

在输入标签中使用默认值时，可以在不使用onchange事件处理程序的情况下编辑输入值。

     

如果对输入标记使用 value ，则需要使用onchange事件处理程序来更改输入值。

Answer 3

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

使用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>

因此，尽管本段下面的代码段看起来与使用value道具是相同的，因为onChange可能会更新状态值（因此似乎正在更新defaultValue道具）-不是。它仍然是不受控制的组件，并且将直接从用户输入中更新其值。只需使用this.state.value最初呈现时的默认值即可对其进行初始化。

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