在上一節中，我們講到了React組件，說了如何使用ES6類創建一個React組件并在其他的地方使用它。這一節我們將講到React組件的兩大靈魂——props和state。

props

不知道大家還記不記得xml標簽中的屬性，就像這樣：

<class id="1"> <student id="1">John Kindem</student> <student id="2">Alick Ice</student></class>

這樣一個xml文件表達的意思是1班有兩個學生，學號為1的學生名字為John Kindem，學號為2的學生名字為Alick Ice，其中id就是屬性，你可以把它看做一個常量，它是只讀的。

html繼承自xml，而JSX從莫種意義上又是html和js的擴展，屬性的概念自然得到了傳承。

在React中，我們使用props這一概念向React組件傳遞只讀的值，就像這樣：

// 假設我們已經自定義了一個叫Hello的組件ReactDom.render(  <Hello firstName={'John'} lastName={'Kindem'}/>,  document.getElementById('root'));

在調用React組件的時候，我們可以像上面一樣向組件傳遞一些常量，以便組件在內部調用。而調用的方法，就像下面這樣：

class Hello extends React.Component {  constructor(props) {    super(props);  }  render() {    return (      <div>        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>      </div>    );  }}ReactDom.render(  <Hello firstName={'John'} lastName={'Kindem'}/>,  document.getElementById('root'));

在組件內部獲取傳遞過來的props，只需要使用this.props對象即可，但是在使用之前，記得復寫組件的構造函數，并且接受props的值以調用父類構造。

當然，props也能夠設置默認值，向下面這樣：

class Hello extends React.Component {  constructor(props) {    super(props);  }  static defaultProps = {    firstName: 'John',    lastName: 'Kindem'  };  render() {    return (      <div>        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>      </div>    );  }}ReactDom.render(  <Hello/>,  document.getElementById('root'));

只需在ES6類中聲明一個static的props默認值即可，運行效果和上面一樣。

props沒有多復雜，稍微練習即可習得。

state、組件生命周期

你可能回想，如果我想在React組件中添加動態效果怎么辦？目前學過的知識好像無法解決這一問題。

這一問題需要使用React組件的state來解決，state即狀態的意思，在React中，所有會變化的控制變量都應該放入state，每當state中的內容變化時，頁面的相應組件將會被重新渲染，另外，state完全是組件內部的東西，外部無法向內部傳遞state，也無法直接改變state的值。

先來舉一個例子：