react開發教程（四）React數據流

在React中，數據是自頂向下流動的（稱爲單項數據流），從父組件傳遞到子組件。所以組件是簡單且易於把握的，它們只需從父節點獲取props渲染便可。若是頂層組件的某個prop改變了，React會遞歸向下遍歷整個組件樹，重新渲染全部使用這個屬性的組件。
然而在React中出了props以外還有本身的狀態，這些狀態只能在組件內修改，那這個狀態就是state

props:就是properties的縮寫，你可使用它把任意類型的數據傳遞給組件(通俗一點就是，能夠當成方法傳遞的參數)
state:當前組件內部數據

props

能夠在掛載組件的時候設置它的props

<Component title="標題" />
var data = {
    name : "劉宇",
    title : "標題"
};
<Component {...data} />

在組件內部調用的話就是使用 this.props

//Comment.js
import React, { Component } from 'react';、
import './Comment.css';

class Comment extends Component {
  render() {
    return (
      <div className="Comment">
        {/**接受參數**/}
        {this.props.name}
        {/**接受子節點**/}
        {this.props.children}
      </div>
    );
  }
}
export default Comment;

//App.js
class App extends Component {
  render() {
    return (
      <div className="App">
        {/**調用組件**/}
        <Comment name="劉宇" /**傳遞參數**/>組件插入內容{/**子節點**/}</Comment>
      </div>
    );
  }
}

export default App;

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

propTypes

propTypes用於規範props的類型與必須的狀態。若是組件定義了propTypes,那麼在開發環境下，就會對組件的props值的類型做檢查，若是傳入的props不能與之匹配，React將實時在控制檯裏報warning（警告）；

static propTypes = {
  // 你能夠定義一個js原始類型的prop,默認請狀況下，這是都是可選的
  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol,

  // 任何能夠渲染的東西：數字，字符串，元素或數組（或片斷）。
  optionalNode: React.PropTypes.node,

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

  // 你也能夠聲明prop是某個類的實例。 內部使用的是JS的instanceof運算符。
  optionalMessage: React.PropTypes.instanceOf(Message),

  // 你能夠經過將它做爲枚舉來確保你的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),

  // 採起特定樣式的對象
  optionalObjectWithShape: React.PropTypes.shape({
    color: React.PropTypes.string,
    fontSize: React.PropTypes.number
  }),

  // 你能夠用`isRequired`來鏈接到上面的任何一個類型，以確保若是沒有提供props的話會顯示一個警告。
  requiredFunc: React.PropTypes.func.isRequired,

  // 任何數據類型
  requiredAny: React.PropTypes.any.isRequired,

  // 您還能夠指定自定義類型檢查器。 若是檢查失敗，它應該返回一個Error對象。 不要`console.warn`或throw，由於這不會在`oneOfType`內工做。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // 您還能夠爲`arrayOf`和`objectOf`提供自定義類型檢查器。 若是檢查失敗，它應該返回一個Error對象。 
  // 檢查器將爲數組或對象中的每一個鍵調用驗證函數。 
  // 檢查器有兩個參數，第一個參數是數組或對象自己，第二個是當前項的鍵。
  customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};
//以上是ES6的寫法，若是使用的是createClass
MyComponent.propTypes = {
//同上
}

要求只能是單個子元素

class MyComponent extends React.Component {
    render() {
        // 只能包含一個子元素，不然會給出警告
        const children = this.props.children;
        return (
            <div>{children}</div>
        );
    }
}

MyComponent.propTypes = {
    children: React.PropTypes.element.isRequired
}

getDefaultProps和defaultProps

能夠爲組件添加getDefaultProps來設置屬性的默認值。

//es6寫法

class Comment extends Component {
  //設置默認props值
  static defaultProps = {
    name:"默認值"
  }
  render() {
    return (
      <div className="Comment">
        {/**接受參數**/}
        {this.props.name}
        {/**接受子節點**/}
        {this.props.children}
      </div>
    );
  }
}


var Comment = React.createClass( {
  //設置默認props值
  getDefaultProps : {
    name:"默認值"
  },
  render : function(){
    return (
      <div className="Comment">
        {/**接受參數**/}
        {this.props.name}
        {/**接受子節點**/}
        {this.props.children}
      </div>
    );
  }
})

注意：props能夠訪問不能夠修改，若是須要修改，請使用state

state

state是組件內部的屬性。組件自己是一個狀態機，他能夠在constructor中經過this.state直接定義他的值，而後根據這些值來渲染不一樣的UI,當state的值發生改變時，能夠經過this.setState方法讓組件再次調用render方法，來渲染新的UI.

var Comment = React.createClass( {
  //設置state值
  getInitialState : {
    num:0
  },
  addNum : function(){
    var num = this.state.num++;
    this.setState({
        num:num
    })
  },
  render : function(){
    return (
      <div className="Comment">
        <button onClick>{this.state.num}</button>
      </div>
    );
  }
})

//es6寫法
class Comment extends Component {
  constructor(props) {
    super(props);
    this.state = {
        num : 0
    };
    this.addNum = this.addNum.bind(this)
  }

  addNum() {
    var num = this.state.num++;
    this.setState({
        num:num
    })
  }

  render() {
    return (
      <div className="Comment">
        <button onClick>{this.state.num}</button>
      </div>
    );
  }
}

上一篇：react開發教程（三）組件的構建
下一篇：react開發教程（五）生命週期