摘要：受控組件例假設有一個方法非受控組件例接下來我們來看下如果編寫這兩種組件，打個比方我們要自定義一個組件。于是修改后的代碼如下確定使用這個組件的代碼以上就是兩種組件的編寫思路，你可以選擇把你的組件編寫成任意一種，那么使用者使用時也會有所不同。

新手寫 React 組件往往無從入手，怎么寫，什么時候用 props，什么時候用 state 摸不著頭腦。其實是沒有了解到 React 的一些思想。就我個人的經驗大多數的組件都有一定的套路可言，接下來就先介紹下 React 組件的基本思想。

React 組件可以分為可控組件和非可控組件。可控組件意思是組件自身控制自己的狀態(屬性)，可以通過自身提供的方法(供調用者使用)來改變自己的狀態。譬如一個 input text 輸入框提供一個 reset 方法，如果要清空用戶輸入則通過獲得 inupt 組件對象，然后調用 reset 方法來做

refs.inputRef.rest() 。

非可控組件的意思是組件本身的狀態(屬性)自己無法更改，只能隨著外部傳入的值(props)而變化。還是拿輸入框清空這一個操作來說，非可控的 input 不通過自己提供方法來改變(維護)自己的狀態(value)，只通過外部傳入一個值為空字符串的 value 來做到清空的效果。

reset(){
  this.setState({
    inputValue: ""
  })
}
render(){
  return 
}

我們拿一個場景來看下完整的代碼(一個 form 中有一個 input，有一個 reset 按妞，點擊 reset 按妞會清空用戶的輸入)，看下這兩種組件書寫的區別。
受控組件例：

class App extends React.Component {
  reset = ()=>{
    this.refs.myInput.reset() // 假設 input 有一個 reset 方法
  }
  render() {
    

      

        
        Reset
      
    
  }
}

非受控組件例：

class App extends React.Component {
  constructor( props ){
    super( props );
    this.state = {
      inputValue: "Plz input your text."
    }
  }
  reset = ()=>{
    this.setState( {
      inputValue: ""
    } )
  }
  render() {
    

      

        
        Reset
      
    
  }
}

接下來我們來看下如果編寫這兩種組件，打個比方我們要自定義一個 alert 組件。我們先從非受控組件說起，因為較簡單。非受控組件所要做的就是把所有狀態提取到組件的 props 中去，render 中就用 props。一個 alert 有哪些最基本的狀態(屬性)呢？我們以最基礎的功能定出一個表示顯示與否的 show，一個表示顯示內容的 content。那么組件代碼如下。

class Alert extends React.Component {
  constructor( props ) {
    super( props )
  }
  render() {
    let style = {
      display: this.props.show ? "fixed" : "none"
    }
    return (
      

        
Alert
        
{ this.props.content }
        

          確定
        
      
    );
  }
}

Alert.propTypes = {
  show: React.PropTypes.bool,
  content: React.PropTypes.string
}

我們看到最直觀的就是只需要考慮到 props 的可能取值就行，不需要關心如何改變props。而使用這個非可控 alert 的代碼如下：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      alertMsg: "",
      showAlert: false
    }
    this.saveHandler = ()=>{
      // ajax success
      this.setState( {
        alertMsg: "Save successfully",
        showAlert: true
      } )
    }
  }

  render() {
    

      Save
      
    
  }
}

接下來我們看下可控組件的alert怎么寫。可控組件通過方法來供調用者來改變組件的狀態(屬性)。所以暫時我們不定義 props 只定義幾個方法 show(content)， hide()。組件代碼如下:

class Alert extends React.Component {
  constructor( props ) {
    super( props )
    this.state = {
      content: "",
      show: false
    }
    this.show = ( content )=>{
      this.setState( {
        content: content,
        show: true
      } )
    }

    this.hide = ()=>{
      this.setState( {
        show: false
      } )
    }
  }
  render() {
    let style = {
      display: this.state.show ? "fixed" : "none"
    }
    return (
      

        
Alert
        
{ this.state.content }
        

          確定
        
      
    );
  }
}

我們看到可控組件內部需要用到 state 來自己改變自己的狀態。使用這個可控 alert 的代碼如下：

import { Alert } from "Alert";

class App extends React.Component {
  constructor() {
    super();
    this.saveHandler = ()=>{
      // ajax success
      this.refs.myAlert.show( "Save Successfully" );
    }
  }

  render() {
    

      Save
      
    
  }
}

但是可控組件有一個問題就是他的初始化狀態如何設置(如何由外部定義組件 state 的初始化值)？由于沒有 props 那么只能通過方法來設置，那么這么做法很別扭。這時可以通過定義 props 把初始化狀態在生成這個組件時傳入，而不必等組件生成完再通過調用方法傳入。于是修改后的代碼如下：

class Alert extends React.Component {
  constructor( props ) {
    super( props )
    this.state = {
      content: this.props.defaultContent,
      show: this.props.defaultShow
    }
    this.show = ( content )=>{
      this.setState( {
        content: content,
        show: true
      } )
    }

    this.hide = ()=>{
      this.setState( {
        show: false
      } )
    }
  }

  render() {
    let style = {
      display: this.state.show ? "fixed" : "none"
    }
    return (
      

        
Alert
        
{ this.state.content }
        

          確定
        
      
    );
  }
}

Alert.propTypes = {
  defaultShow: React.PropTypes.bool,
  defaultContent: React.PropTypes.string
}

Alert.defaultProps = {
  defaultShow: false,
  defaultContent: ""
}

使用這個組件的代碼：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      alertMsg: "",
      showAlert: false
    }
    this.saveHandler = ()=>{
      // ajax success
      this.refs.myAlert.show( "Save Successfully" );
    }
  }

  render() {
    

      Save
      
    
  }
}

以上就是兩種 React 組件的編寫思路，你可以選擇把你的組件編寫成任意一種，那么使用者使用時也會有所不同。但是作為一個具有良好可用性的組件，不應該限制使用者的用法，那么下篇將介紹如何編寫一個既可以作為可控組件，也可以作為一個非可控組件的組件寫法。