react學習系列之states與props

state

React 把組件當作是一個狀態機（State Machines）。經過與用戶的交互，實現不一樣狀態，而後渲染 UI，讓用戶界面和數據保持一致。
React 裏，只需更新組件的 state，而後根據新的 state 從新渲染用戶界面（不要操做 DOM）。

state工做原理
經常使用的通知React數據變化的方法是調用setState(data,callback).這個方法會合並data到this.state,並從新渲染組件.渲染完成後,調用可選的callback回調.大部分狀況不須要提供callback,由於React會負責吧界面更新到最新狀態.
經常使用的模式就是建立多個只負責渲染數據的無狀態(stateless)組件,在他們的上層建立一個有狀態(stateful)組件並把它的狀態經過props傳給子級.有狀態的組件封裝了全部的用戶交互邏輯,而這些無狀態組件只負責聲明式地渲染數據.
下面使用es6的class的方式實現一個likedbutton

import React from 'react';
import ReactDOM from 'react-dom';

class LikedButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liked : props.liked || false
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      liked: !this.state.liked
    });
  }
  render() {
    var text = this.state.liked ? '喜歡' : '不喜歡';
    return (
      <div onClick={this.handleClick}>
        Your text is {text}. Click to say.
      </div>
    );
  }
}

LikedButton.propTypes = {
  liked : React.PropTypes.boolean
}

LikedButton.defaultprops = {
  liked: false
}

ReactDOM.render(
  <LikedButton/>,
  document.getElementById('app')
);

props

組件中的props是一種父級向子級傳遞數據的方式.
state 和 props 主要的區別在於 props 是不可變的，而 state 能夠根據與用戶交互來改變。這就是爲何有些容器組件須要定義 state 來更新和修改數據。 而子組件只能經過 props 來傳遞數據。
能夠經過 getDefaultProps() 方法爲 props 設置默認值
Props 驗證使用 propTypes，它能夠保證咱們的應用組件被正確使用，React.PropTypes 提供不少驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制檯會拋出警告。

驗證器說明

propTypes: {
    // 能夠聲明 prop 爲指定的 JS 基本數據類型，默認狀況，這些數據是可選的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 能夠被渲染的對象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,

    //  React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操做符聲明 prop 爲類的實例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 來限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 能夠是多個對象類型中的一個
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定類型組成的數組
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定類型的屬性構成的對象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 參數的對象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 任意類型加上 `isRequired` 來使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意類型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定義驗證器。若是驗證失敗須要返回一個 Error 對象。不要直接使用 `console.warn` 或拋異常，由於這樣 `oneOfType` 會失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});