受控输入和非受控输入

上面代码的结果是我们可以操作 input 元素，但是无法改变它的值。它永远都不会更新，因为我们使用的是单一数据源: App 组件的状态。要想让 input 正常工作的话，需要为其添加 onChange 处理方法来更新状态 (单一数据源)。 会触发新的渲染周期，所以能看到在 input 中输入的文字。

与之相反的是非受控输入，它让浏览器来处理用户的输入。我们还可以通过使用 defaultValue 属性来提供初始值，此后浏览器将负责保存输入的状态。

属性接收字符串或回调函数。上面的代码使用回调函数来将 DOM 元素保存在局部变量 input 中。之后当 onChange 事件触发时，我们将 input 中的最新值保存到 App 组件的状态里。

使用受控输入还是非受控输入，这个选择常常不被人所重视。但我相信这是一个最基本的决策，因为它决定了 React 组件的数据流。我个人认为非受控输入更像是一种反模式，应该尽量避免使用。