摘要：在中，數(shù)據(jù)是自頂向下流動的稱為單項數(shù)據(jù)流，從父組件傳遞到子組件。任何數(shù)據(jù)類型您還可以指定自定義類型檢查器。如果檢查失敗，它應(yīng)該返回一個對象。不要或，因為這不會在內(nèi)工作。檢查器有兩個參數(shù)，第一個參數(shù)是數(shù)組或?qū)ο蟊旧?，第二個是當(dāng)前項的鍵。

在React中，數(shù)據(jù)是自頂向下流動的（稱為單項數(shù)據(jù)流），從父組件傳遞到子組件。因此組件是簡單且易于把握的，它們只需從父節(jié)點獲取props渲染即可。如果頂層組件的某個prop改變了，React會遞歸向下遍歷整個組件樹，從新渲染所有使用這個屬性的組件。
然而在React中出了props之外還有自己的狀態(tài)，這些狀態(tài)只能在組件內(nèi)修改，那這個狀態(tài)就是state

props:就是properties的縮寫，你可以使用它把任意類型的數(shù)據(jù)傳遞給組件(通俗一點就是，可以當(dāng)成方法傳遞的參數(shù))
state:當(dāng)前組件內(nèi)部數(shù)據(jù)

可以在掛載組件的時候設(shè)置它的props

var data = {
    name : "劉宇",
    title : "標(biāo)題"
};

在組件內(nèi)部調(diào)用的話就是使用 this.props

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

class Comment extends Component {
  render() {
    return (
      

        {/**接受參數(shù)**/}
        {this.props.name}
        {/**接受子節(jié)點**/}
        {this.props.children}
      
    );
  }
}
export default Comment;

//App.js
class App extends Component {
  render() {
    return (
      

        {/**調(diào)用組件**/}
        組件插入內(nèi)容{/**子節(jié)點**/}
      
    );
  }
}

export default App;

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

ReactDOM.render(
  ,
  document.getElementById("root")
);

propTypes用于規(guī)范props的類型與必須的狀態(tài)。如果組件定義了propTypes,那么在開發(fā)環(huán)境下，就會對組件的props值的類型作檢查，如果傳入的props不能與之匹配，React將實時在控制臺里報warning（警告）；

static propTypes = {
  // 你可以定義一個js原始類型的prop,默認(rèn)請情況下，這是都是可選的
  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,

  // 任何可以渲染的東西：數(shù)字，字符串，元素或數(shù)組（或片段）。
  optionalNode: React.PropTypes.node,

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

  // 你也可以聲明prop是某個類的實例。 內(nèi)部使用的是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)
  ]),

  // 某種類型的數(shù)組
  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,

  // 任何數(shù)據(jù)類型
  requiredAny: React.PropTypes.any.isRequired,

  // 您還可以指定自定義類型檢查器。 如果檢查失敗，它應(yīng)該返回一個Error對象。 不要`console.warn`或throw，因為這不會在`oneOfType`內(nèi)工作。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        "Invalid prop `" + propName + "` supplied to" +
        " `" + componentName + "`. Validation failed."
      );
    }
  },

  // 您還可以為`arrayOf`和`objectOf`提供自定義類型檢查器。 如果檢查失敗，它應(yīng)該返回一個Error對象。 
  // 檢查器將為數(shù)組或?qū)ο笾械拿總€鍵調(diào)用驗證函數(shù)。 
  // 檢查器有兩個參數(shù)，第一個參數(shù)是數(shù)組或?qū)ο蟊旧?，第二個是當(dāng)前項的鍵。
  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 (
            
{children}
        );
    }
}

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

可以為組件添加getDefaultProps來設(shè)置屬性的默認(rèn)值。

//es6寫法

class Comment extends Component {
  //設(shè)置默認(rèn)props值
  static defaultProps = {
    name:"默認(rèn)值"
  }
  render() {
    return (
      

        {/**接受參數(shù)**/}
        {this.props.name}
        {/**接受子節(jié)點**/}
        {this.props.children}
      
    );
  }
}


var Comment = React.createClass( {
  //設(shè)置默認(rèn)props值
  getDefaultProps : {
    name:"默認(rèn)值"
  },
  render : function(){
    return (
      

        {/**接受參數(shù)**/}
        {this.props.name}
        {/**接受子節(jié)點**/}
        {this.props.children}
      
    );
  }
})

注意：props可以訪問不可以修改，如果需要修改，請使用state

state是組件內(nèi)部的屬性。組件本身是一個狀態(tài)機，他可以在constructor中通過this.state直接定義他的值，然后根據(jù)這些值來渲染不同的UI,當(dāng)state的值發(fā)生改變時，可以通過this.setState方法讓組件再次調(diào)用render方法，來渲染新的UI.

var Comment = React.createClass( {
  //設(shè)置state值
  getInitialState : {
    num:0
  },
  addNum : function(){
    var num = this.state.num++;
    this.setState({
        num:num
    })
  },
  render : function(){
    return (
      

        {this.state.num}
      
    );
  }
})

//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 (
      

        {this.state.num}
      
    );
  }
}

上一篇：react開發(fā)教程（三）組件的構(gòu)建
下一篇：react開發(fā)教程（五）生命周期