React：數(shù)據(jù)流

在React中，數(shù)據(jù)的流向是 單向 的---從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)。當(dāng)頂層組件的某個(gè)prop改變了， React會遞歸地向下遍歷整棵組件樹，重新渲染所有使用這個(gè)屬性的組件。

var data=[{title:'props'}];
<MyView data={data}/>

var data=[{title:'props'}];
var myView=React.render({
  <MyView/>,
  document.body
});
myView.setProps({data:data});

var CheckLink = React.createClass({   
  render: function() {   
    // 這樣會把 CheckList 所有的 props 復(fù)制到 <a>   
    return <a {...this.props}>{'√ '}{this.props.children}</a>;   
  }  
});   
React.render(   
  <CheckLink href="/checked.html">   
    Click here!   
  </CheckLink>,   
  document.getElementById('example')  
);

var MyView=React.createClass({
  propTypes:{
    title:React.PropTypes.isRequired,
    onClick:React.PropTypes.func
  },
  ...
});

//基本類型
React.PropTypes.array
React.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string

//所有可以被渲染的對象：數(shù)字，字符串，DOM元素或包含這些類型的數(shù)組。
React.PropTypes.node

//React元素
React.PropTypes.element

//用js的instanceof操作符聲明prop為類的實(shí)例
React.PropTypes.instanceOf(Object)

//用enum來限制prop只接受指定的值
React.PropTypes.oneOf(['a','b'])

//指定的多個(gè)對象類型中的一個(gè)
React.PropTypes.oneOfType([
  React.PropTypes.number,
  React.PropTypes.string
])

//指定類型組成的數(shù)組
React.PropTypes.arrayOf(React.PropTypes.number)

//指定類型的屬性構(gòu)成的對象
React.PropTypes.objectOf(React.PropTypes.number)

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

//必需值
React.PropTypes.number.isRequired

//必需不為空的任意類型
React.PropTypes.any.isRequired

customPropType:function(props,propName,componentName){
  if(!/[0-9]/.test(props[propName]){
    return new Error('inValid');
  }
}

getDefaultProps

在組件中，我們可以添加getDefaultProps函數(shù)來設(shè)置屬性的默認(rèn)值。

var MyView=React.createClass({
  getDefaultProps:function(){
    return {
      title:[]
    }
  }
});

注意：getDefaultProps并不是在組件實(shí)例化時(shí)被調(diào)用，而是在React.createClass調(diào)用時(shí)就被調(diào)用了，返回值會被緩存起來。

二、State（狀態(tài)）

每一個(gè)React組件都可以擁有自己的state。

state與props的區(qū)別？

state只存在于組件的內(nèi)部。

getInitialState

我們可以用getInitialState方法來提供一組默認(rèn)值。

var MyView=React.createClass({
  getInitialState:function(){
    return {
      isShow:false
    }
  },
  render:function(){
    var view;
    if(!this.state.isShow){
      view=(
        <div className='item'>item</div>
      );
    };
    return (
      <div className='view'>{view}<button onClick={this.handleClick}>顯示</button></div>
    );
  },
  handleClick:function(){
    var isShow=!this.state.isShow;
    this.setState({
      isShow:isShow
    });
  }
});

state還可以通過 setState 或 replaceState 修改。只要setState或replaceState被調(diào)用，render就會被調(diào)用。一旦render的返回值有變化，頁面會實(shí)時(shí)變化。

replaceState會用一個(gè)全新的state對象完整的替換掉原有的state，而setState只會將傳入的對象合并到已有的state對象中。

注意：永遠(yuǎn)不要直接修改this.state，要通過 this.setState 方法來修改。

放在state和props的各是哪些部分？

不要在state中保存計(jì)算出的值，而應(yīng)該只保存最簡單的數(shù)據(jù)，即那些組件正常工作時(shí)的必要數(shù)據(jù)。

不要嘗試把props復(fù)制到state中，要盡可能把props當(dāng)做數(shù)據(jù)源。

總結(jié)

• 使用props在整個(gè)組件樹中傳遞數(shù)據(jù)和配置
• 避免在組件內(nèi)部修改this.props或調(diào)用this.setProps，把props看作只讀。
• 使用props來做事件處理器，與子組件通信
• 使用state來存儲簡單的視圖狀態(tài)
• 使用 this.setState 來設(shè)置狀態(tài)，不要使用this.state直接修改狀態(tài)。