React state與props學習筆記

組件的狀態與屬性

組件本質上是狀態機，輸入肯定，輸出必定肯定。組件把狀態與結果一一對應起來，組件中有state與prop（狀態與屬性）。

• 屬性(props)是由父組件傳遞給子組件的；
• 狀態(state)是子組件內部維護的數據，當狀態發生變化的同時，組件也會進行更新。當狀態發生轉換時會觸發不一樣的鉤子函數，從而讓開發者有機會作出相應。

props

屬性的用法

1. 鍵值對：值能夠有多種形式<HelloWorld name= ? />：

   • 字符串："XiaoWang";
   • 求值表達式 {123}、{"XiaoWang"};
   • 數組{[1,2,3]};
   • 變量{variable};
   • 函數求值表達式{function}（不推薦，若是須要函數能夠單獨把函數提取出來而後單獨調用函數）;
2. 展開語法{...props}：

React會自動把對象中的屬性和值當作屬性的賦值

var HelloWorld =React.createClass({
    rencer:function () {
        return <p>Hello,{this.props.name1 + ' 'this.props.name2}</p>;
    },
});
var HelloUniverse = React.createClass({
    getInitialState:function () {
        return {
            name1:'Tim',
            name2:'John',
        };
    },
    handleChange: function (event) {
        this.setState({name: event.target.value});
    },
    render: function () {
        return <div>
        <HelloWorld name={...this.state}></HelloWorld>
        <br/>
        <input type="text" onChange={this.handleChange} />
        </div>
    },
});
ReactDom.render(<HelloUniverse />,document.body);

1. setProps：

   var HelloWorld =React.createClass({
       rencer:function () {
           return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
       },
   });
   var instance = React.render(<HelloWorld />,document.body);
   instance.setProps({name:'Tim'});

setProps(object nextProps[, function callback])能夠設置組件的屬性。這個方法已通過時了（與replaceProps等同樣），不久將被刪除。這個方法不支持ES6類組件React.Component擴展。

propTypes

組件的屬性能夠接受任意值，字符串、對象、函數等等均可以。有時，咱們須要一種機制，驗證別人使用組件時，提供的參數是否符合要求。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,//這個title是必須的，並且它的值必須是字符串
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

getDefaultProps

getDefaultProps 方法能夠用來設置組件屬性的默認值。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(<MyTitle />,document.body);

this.props.children

this.props 對象的屬性與組件的屬性一一對應，可是有一個例外，就是 this.props.children 屬性。它表示組件的全部子節點。

state

組件在運行時須要修改的數據就是狀態，this.state 是會隨着用戶互動而產生變化的特性。組件免不了要與用戶互動，React 的一大創新，就是將組件當作是一個狀態機，一開始有一個初始狀態，而後用戶互動，致使狀態變化，從而觸發從新渲染 UI。

state工做原理

經常使用的通知 React 數據變化的方法是調用 setState(data, callback)。這個方法會合並（merge） data 到 this.state，並從新渲染組件。渲染完成後，調用可選的 callback 回調。大部分狀況下不須要提供 callback，由於 React 會負責把界面更新到最新狀態。

getInitialState

object getInitialState()
getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象能夠經過 this.state 屬性讀取。在組件掛載以前調用一次。返回值將會做爲 this.state 的初始值。

setState

setState(object nextState[, function callback])
合併 nextState 和當前 state。這是在事件處理函數中和請求回調函數中觸發 UI 更新的主要方法。另外，也支持可選的回調函數，該函數在 setState 執行完畢而且組件從新渲染完成以後調用。this.setState 方法用於修改狀態值，每次修改之後，自動調用 this.render 方法，再次渲染組件。

replaceState

replaceState(object nextState[, function callback])
相似於 setState()，可是刪除以前全部已存在的 state 鍵，這些鍵都不在 nextState 中。

哪些組件應該有 State？

大部分組件的工做應該是從 props 裏取數據並渲染出來。可是，有時須要對用戶輸入、服務器請求或者時間變化等做出響應，這時才須要使用 State。

嘗試把儘量多的組件無狀態化。這樣作能隔離 state，把它放到最合理的地方，也能減小冗餘，同時易於解釋程序運做過程。

經常使用的模式是建立多個只負責渲染數據的無狀態（stateless）組件，在它們的上層建立一個有狀態（stateful）組件並把它的狀態經過 props 傳給子級。這個有狀態的組件封裝了全部用戶的交互邏輯，而這些無狀態組件則負責聲明式地渲染數據。

參考文章