class MyComponent extends React.Component{
 constructor(props) {
  super(props)
  this.state ={
  value:0
  }
 }
handleClick = () => {
  this.setState({value:1})
   console.log('在handleClick里輸出' + this.state.value);
}
render(){
   console.log('在render()里輸出' + this.state.value);
return (

   按鈕
  
)
  }
}
export default MyComponent
//省略渲染過程，下面也一樣

handleStateChange1 = () => {
  this.setState({value:1})
  console.log('在handleClick里輸出' + this.state.value);
}
handleStateChange2 = () => {
  this.setState({value:2})
  console.log('在handleClick里輸出' + this.state.value);
}
handleStateChange3 = () => {
  this.setState({value:3})
  console.log('在handleClick里輸出' + this.state.value);
}
handleClick = () => {
  this.handleStateChange1();
  this.handleStateChange2();
  this.handleStateChange3();
}

class Son extends React.Component{
 render(){
  return(
    {this.props.value}
    

點擊子組件Son，內(nèi)容由a變成b，說明父組件的state被修改了

3.context的運用，避免“props傳遞地獄”

3.1假設(shè)一個比較極端的場景：你需要從你的子組件里調(diào)用父父父父父組件的屬性或方法，怎么辦！當(dāng)組件嵌套層級過深的時候，不斷地傳props作為實現(xiàn)方式簡直就是噩夢！我稱之為“props傳遞地獄”（這個詞是我瞎編的，參考自“回調(diào)函數(shù)地獄”）

我們接下來實現(xiàn)的是這樣一個需求，把gene屬性（基因）從組件GrandFather -->Father --> Son傳遞，如果用props傳遞：

class Son extends React.Component{
 render(){
  return (我從我的爺爺那里得到了基因--{this.props.gene})
  }
 }
class Father extends React.Component{
 render(){
  return ()
 }
}
class GrandFather extends React.Component{
 constructor(props) {
  super(props)
  this.state ={
  gene:'[爺爺?shù)幕騗'
  }
 }
 render(){
  return ()
 }
}

demo:

實現(xiàn)是實現(xiàn)了，但你想想，假設(shè)不是從“爺爺”組件，而是從“太太太太爺爺”組件傳下來，這多可怕！不過沒關(guān)系，react提供了一個叫做context(上下文)的API，你在頂層組件的context中定義的屬性，可以在所有的后代組件中，通過this.context.屬性去引用！讓我們一睹為快：

class Son extends React.Component{
 render(){
  console.log(this.context.color);
  return (我從我的爺爺那里得到了基因--{this.context.gene})
  }
}
Son.contextTypes ={
  gene:React.PropTypes.string
}
class Father extends React.Component{
 render(){
  return ()
  }
}
class GrandFather extends React.Component{
 getChildContext(){
  return {gene:'[爺爺?shù)幕騗'}
 }
 render(){
  return ()
 }
}
GrandFather.childContextTypes = {
  gene: React.PropTypes.string
};
export default GrandFather

demo效果同上！這個時候你發(fā)現(xiàn)，我們在組件和組件中都沒有向下傳遞props，我們就從最下層的Son組件中獲取了gene屬性，是不是很方便！

解釋下代碼：

getChildContext()是你在頂層組件中定義的鉤子函數(shù)，這個函數(shù)返回一個對象——你希望在后代組件中取用的屬性就放在這個對象中，譬如這個例子中我希望在Son組件中通過this.context.gene取屬性，所以在getChildContext()中返回{gene:'[爺爺?shù)幕騗'}

GrandFather.childContextTypes和Son.contextTypes 用于規(guī)定頂層組件和取頂層組件context的后代組件的屬性類型

【注意】GrandFather.childContextTypes和Son.contextTypes 這兩個對象必須要規(guī)定！否則context只能取到空對象！

有圖有真相之context和props的區(qū)別

3.2context是否推薦使用？

雖然上面這個例子說明了context多么好用，但注意：官方并不推薦經(jīng)常使用它，因為它會讓你的應(yīng)用架構(gòu)變得不穩(wěn)定(官方文檔原話If you want your application to be stable, don't use context),在我看來，為什么在大多數(shù)情況下要使用props而不是實現(xiàn)數(shù)據(jù)流呢，因為props憑借組件和組件間嚴(yán)密的邏輯聯(lián)系，使得你能夠清晰地跟蹤應(yīng)用的數(shù)據(jù)流(it's easy to track the flow of data through your React components with props)當(dāng)然了，如果你遇到上述的例子的情況，context還是大有裨益的

3.3需要改變context中的屬性時候，不要直接改變它，而是使用this.state作為媒介，如果你試圖在頂層組件的state中放入一個可變的屬性你可以這樣做：

getChildContext(){
  return {type:this.state.type}
}

3.4在上述我限制gene的類型時候我是這樣寫的：gene: React.PropTypes.string，使用了React內(nèi)置的React.PropTypes幫助屬性，此時我的版本為 "react": "15.4.2",在15.5的版本后這一幫助屬性被廢棄，推薦使用props-types庫，像這樣：

const PropTypes = require("Prop-Types");
GrandFather.childContextTypes = {
  gene: PropTypes.string
};

當(dāng)然，在這之前你需要npm install prop-types

4.組件類里有私有變量a，它到底改放在this.a中還是this.state對象中（作為屬性a）呢？

這得根據(jù)它是否需要實時的重渲染決定，如果該變量需要同步到變化的UI中，你應(yīng)該把它放在this.state對象中，如果不需要的話，則把它放在this中（無代碼無demo）

到此，相信大家對“使用react框架需要注意哪些事項”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！