reactjs - refs 与 onChange

Question

我最近开始学习react.js(喜欢它!)，并遇到了一个处理输入值的有趣场景。

在 Egghead 教程中，他们让您使用 ref 更新输入，如下所示:

handleSubmit(){
    var newNote = this.refs.note.value;
    this.refs.note.value = '';
    this.props.addNote(newNote);
}

<input type="text"  ref="note" />
<button type="button" onClick={this.handleSubmit.bind(this)}> 
  Submit 
</button>

后来我就在玩material ui库(也很棒)并遇到了一个问题，我无法使用 ref 更新其中一个 Material 组件(可能是因为 this 问题)。在 Google 上一段时间后，我发现您可以使用 state，然后使用 onChange 函数更新它，如下所示:

handleNoteChange(e){
    this.setState({newNote: e.target.value});
}

<TextField 
    type="text" 
    value={this.state.newNote} 
    onChange={this.handleNoteChange.bind(this)} />

似乎使用 ref 会更容易，但是，在我最近学习 React Native 时，你所做的一切似乎都是第二种方式，使用 onChange函数和一个状态变量。

所以我的问题是，继续前进，使用其中一种会比另一种更好吗？也许存在一些限制使得在 native 上更好地使用state？

Answer 1

在 React 中，避免使用引用来操作 DOM。你永远不应该做这样的事情:

this.refs.note.value = '';

必要时(通常是为了响应用户输入)从 DOM 读取数据是可以的，但是信息从应用程序传递到 DOM 的唯一方法是通过 render() 方法。否则，DOM 会与您的应用程序不同步。在 React 中，你的“真相来源”存在于内存中，而不是 DOM 中。

您提供的第二个示例是标准的 React 方式。 View (由 render() 方法定义)最终派生自 props 和 state。更改状态会触发 View 的更改。因此调用 this.setState() 将强制您的组件重新渲染。