Question

所以，这是我知道的两种在React中存储价值的方法。初始化this.state变量并在其中存储数据（this.setState（{}））或refs（this.refs.nodename.value）。我想使用refs，因为这需要更少的行数。但是，对于性能而言，什么更好呢？这是您的问题，reactjs大师。

谢谢。

<input onChange={ ({ target }) => this.setState({ value: target.value }) } />
// Or
<input ref="somename" />

Answer 1

此处的性能问题无关紧要（也没有太大的区别）。

相关的是您查看代码的方式。

ref是一个转义窗口，它授予您访问底层DOM的权限，据说React是从您那里抽象出来的（当您仅使用React且没有引用或dangeourslySetInnerHTML时，您的代码永远不会意识到DOM甚至存在）。这被称为泄漏抽象，从一般意义上来说，这是一个坏东西™

还要注意：不推荐使用第二个示例。在将来的React版本中，将不允许使用字符串引用。

正确的格式是

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;
  }

  render() {
    // ...
    <input ref={ref => this.inputRef = ref} />
  }
}

不再那么迷人了；）

我个人的喜好是尽可能避免引用，而仅将其用作最后的手段，以逃避它们的本意。

Answer 2

我已经看到很多人使用以下格式：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: ''
    }
  }

  onSubmit() {
    callSomeOtherFn(this.state.inputText);
    this.setState({
      inputText: ''
    })
  }

  handleChange(e) {
    this.setState({
      inputText: e.target.value
    })
  }

  render() {
    <input value={this.state.inpuText} onChange={this.handleChange}/>
    <button onClick={this.onSubmit.bind(this)}>Submit</button>
  }
}

并从状态管理表单/输入

我必须在哪里保存输入值？ -ReactJS

2 个答案: