javascript - 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

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

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

使用值(value)支撑

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 prop 相同，因为 onChange 可能会更新状态值(因此它看起来像是更新 defaultValue prop) - 它不是。它仍然是一个不受控制的组件，并将直接根据用户输入更新其值。它只是使用初始呈现时 this.state.value 的默认值进行初始化。

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