在 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更新后的文本会在视觉上得到更新）。
那么，两者之间的真正区别是什么？
只要您更改其中使用的值，value就不会有任何区别。如果您不更新变量并设置了 textareas 值，则无法通过键入来更改 textarea 的值。通过使用 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>因此，虽然本段下方的代码段可能看起来与使用valueprop相同，因为onChange可能会更新状态值（因此它看起来像是在更新defaultValueprop），但事实并非如此。它仍然是一个不受控制的组件，将直接从用户输入更新其值。它只是使用this.state.value初始渲染时的默认值进行初始化。
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
当您使用带有输入标签的默认值时，您可以在没有 onchange 事件处理程序的情况下编辑输入值。
如果您使用带有输入标签的值，您需要使用 onchange 事件处理程序来更改输入值。
