有人可以对 ref 与受控输入以及反应中状态变量的用例给出正确的解释吗？

Question

我浏览了 react 的文档，关于受控和非受控组件。我创建了一个简单的用例，我想强制用户在输入字段中只输入大写值。

在第一种情况下，我使用 'ref' 和 'onChange' 来实现这一点，并使用全局对象的属性来捕获 dom 节点。这是它的代码 - https://jsfiddle.net/69z2wepo/78064/

class Nikhil extends React.Component {
   constructor(props){
      super(props);
        this.field = {
            input: ''
        };
      }
    foo() {
       this.y = this.field.input;
       this.y.value = this.y.value.toUpperCase();
     }
    render() {
      return (
        <div>
           <input ref={ node => this.field.input = node } onChange={ this.foo.bind(this) }/>
        </div>
       );
     }
   }

ReactDOM.render(<Nikhil/>,container);

在第二种情况下，我使用了“value”属性和“onChange”状态。这是代码 - https://jsfiddle.net/69z2wepo/78066/

class Nikhil extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        input: ''
    };
  }
  foo(e) {
    this.setState({ input: e.target.value.toUpperCase() });
  } 
  render() {
    return (
      <div>
        <input value= { this.state.input } onChange={ this.foo.bind(this) }/>
      </div>
    );
  }
}

ReactDOM.render(<Nikhil/>,container);

文档说：

 With a controlled component, every state mutation will have an 
 associated handler function. This makes it straightforward to 
 modify or validate user input. For example, if we wanted to enforce 
 that names are written with all uppercase letters, we could write 
 handleChange as:

 handleChange(event) {
  this.setState({ value: event.target.value.toUpperCase()} );
 }

好吧，即使我不使用 state 也可以验证用户输入，并且不将 value prop 与 state 同步，如上面的第一个示例中所做的那样。

1. 那么肯定可以在不使用状态的情况下验证用户输入？

2. 你能解释为什么一种方法比另一种更好吗？

3. “单一事实来源”究竟是什么意思，为什么它如此重要？

在这两种情况下，我都使用组件的全局变量，该变量是一个对象，可以在整个组件中访问。

4. 另外，为什么我应该在示例 2 中不必要地使用 value = { this.state.input } ，因为这会在每次击键时调用渲染，而在 1 渲染的情况下只调用一次。那么情况 1 的性能不是比 2 更好吗？

也来自文档：

 To write an uncontrolled component, instead of writing an 
 event handler for every state update, you can use a ref to get 
 form values from the DOM

好吧，即使在运行时使用“ref”来验证用户输入时，我也需要编写一个像“onChange”这样的事件处理程序，就像案例 1 中所做的那样。所以使用带有“ref”的事件处理程序是正常的吗？

状态变量的用例——根据我的理解，除了使用状态变量之外我别无选择的唯一情况是我需要动态更新视图。因为 this.setState() 每次运行时都会调用 render 。这是代码 - https://jsfiddle.net/69z2wepo/78068/

class Nikhil extends React.Component {
  constructor(props){
  super(props);
    this.state = {
        input: ''
    };
  }
  foo(e) {
    this.setState({ input: e.target.value });
  }
  render() {
    return (
    <div>
      <input onChange={ this.foo.bind(this) }/>
        <p>{ this.state.input }</p>
    </div>
  );
 }
}

ReactDOM.render(<Nikhil/>,container);

如果有人能够澄清所有三个示例并增强我对上述概念的理解，我将不胜感激。

Answer 1

根据 React 文档 - https://facebook.github.io/react/docs/refs-and-the-dom.html：

不要过度使用参考文献

您的第一个倾向可能是使用 refs 在您的应用程序中“让事情发生”。如果是这种情况，请花点时间更仔细地思考状态应该在组件层次结构中的哪个位置拥有。通常，很明显“拥有”该状态的适当位置位于层次结构中的较高级别

在极少数情况下，您可能希望从父组件访问子组件的 DOM 节点。通常不建议这样做，因为它会破坏组件封装，但它有时对于触发焦点或测量子 DOM 节点的大小或位置很有用。

我认为总体思路是，如果你使用 React，你应该使用 React 做得更好的东西，那就是使用 setState 进行状态操作。