在前面的課程中，我們介紹了在React中如何處理表單。通過截獲控件onChange方法，從而將value控制于組件中的模式叫做Controlled Component。

ControlledComponent的一個(gè)特點(diǎn)是代碼量大，較為麻煩。在React中，還有另一種處理表彰的模式，叫UncontrolledComponent。

前一節(jié)中我們介紹了React中一個(gè)非常重要的特性：Ref函數(shù)。利用Ref函數(shù)，可以幫助我們實(shí)現(xiàn)UnControlled Component。

UnControlled Component不截獲控件的值，而是通過Ref函數(shù)，獲取到控件DOM，每次取值時(shí)直接從DOM中取。

通過下面的例子來了解一下：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value); // 根據(jù)DOM獲取value
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />  // 使用ref函數(shù)記錄下DOM
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

使用Uncontrolled Component 模式下，可以使用defaultValue來給控件設(shè)置初始值：

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob" // 使用defautValue設(shè)置初始值
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

如何優(yōu)化React性能？

好，這一節(jié)就到這里?，F(xiàn)這里，你已經(jīng)達(dá)到React中級(jí)水平，后續(xù)我將介紹更多React高級(jí)技術(shù)。

想學(xué)計(jì)算機(jī)技術(shù)嗎？需要1對(duì)1專業(yè)級(jí)導(dǎo)師指導(dǎo)嗎？想要團(tuán)隊(duì)陪你一起進(jìn)步嗎?歡迎加我為好友！微信號(hào)：iTekka。