使用react框架需要注意什么-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“使用react框架需要注意什么”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“使用react框架需要注意什么”這篇文章吧。

創(chuàng)新互聯(lián)建站2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元沙灣做網(wǎng)站,已為上家服務(wù),為沙灣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

這篇文章主要是寫關(guān)于學(xué)習(xí)react中的一些自己的思考：

1.setState到底是同步的還是異步的？

2.如何在子組件中改變父組件的state

3.context的運(yùn)用，避免“props傳遞地獄”

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

1.setState到底是同步的還是異步的？

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 (<div>
   <button onClick ={this.handleClick}>按鈕</button>
  </div>)
  }
}
export default MyComponent
//省略渲染過程，下面也一樣

在這里我們點(diǎn)擊按鈕時(shí)，調(diào)用handleClick函數(shù)，首先調(diào)用this.setState()設(shè)置value,隨即把this.state.value輸出，結(jié)果是什么？

你可能會(huì)想，這還不簡(jiǎn)單——“在handleClick里輸出1”唄，然而你錯(cuò)了，它的結(jié)果為：

事實(shí)上，setState()的調(diào)用是異步的，這意味著，雖然你調(diào)用了setState({value:0})，但this.state.value并不會(huì)馬上變成0，而是直到render()函數(shù)調(diào)用時(shí)，setState()才真正被執(zhí)行。結(jié)合圖說明一下：

你可能又會(huì)問了：要是我在render()前多次調(diào)用this.setState()改變同一個(gè)值呢？（比如value）

我們對(duì)handleClick做一些修改，讓它變得復(fù)雜一點(diǎn)，在調(diào)用handleClick的時(shí)候，依次調(diào)用handleStateChange1 ，handleStateChange2，handleStateChange3，它們會(huì)調(diào)用setState分別設(shè)置value為1,2,3并且隨即打印

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();
}

那么輸出結(jié)果會(huì)是什么呢？如果setState是同步調(diào)用的，那么結(jié)果顯然為

在handleClick里輸出1

在handleClick里輸出2

在handleClick里輸出3

但是結(jié)果為：，證明它是異步的

這下好理解了吧，配合這幅圖：

2.如何在子組件中改變父組件的state呢？

這是我們經(jīng)常會(huì)遇到的問題之一，解決辦法是：在父組件中寫一個(gè)能改變父組件state的方法，并通過props傳入子組件中

class Son extends React.Component{
 render(){
  return(<div onClick = {this.props.handleClick}>
    {this.props.value}
    </div>)
   }
}
class Father extends React.Component{
 constructor(props){
   super(props)
   this.state ={
    value:'a'
    }
  }
 handleClick = () => {
   this.setState({value:'b'})
  }
 render(){
   return (<div style ={{margin:50}}>
      <Son value = {this.state.value} handleClick = {this.handleClick}/>
     </div>)
   }
}

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

3.context的運(yùn)用，避免“props傳遞地獄”

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

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

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

demo:

【(。?`ω´?)雖然聽起來有點(diǎn)怪怪的但是大家別介意哈】

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

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

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

解釋下代碼：

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

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

【注意】GrandFather.childContextTypes和Son.contextTypes 這兩個(gè)對(duì)象必須要規(guī)定！否則context只能取到空對(duì)象！一開始我犯的這個(gè)錯(cuò)誤簡(jiǎn)直讓我狂吐三升血。。。。

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

3.2context是否推薦使用？

雖然上面這個(gè)例子說明了context多么好用，但注意：官方并不推薦經(jīng)常使用它，因?yàn)樗鼤?huì)讓你的應(yīng)用架構(gòu)變得不穩(wěn)定(官方文檔原話If you want your application to be stable, don't use context),在我看來，為什么在大多數(shù)情況下要使用props而不是實(shí)現(xiàn)數(shù)據(jù)流呢，因?yàn)閜rops憑借組件和組件間嚴(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中的屬性時(shí)候，不要直接改變它，而是使用this.state作為媒介，如果你試圖在頂層組件的state中放入一個(gè)可變的屬性你可以這樣做：

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

3.4在上述我限制gene的類型時(shí)候我是這樣寫的：gene: React.PropTypes.string，使用了React內(nèi)置的React.PropTypes幫助屬性，此時(shí)我的版本為 "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對(duì)象中（作為屬性a）呢？

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

以上是“使用react框架需要注意什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站m.kartarina.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享名稱：使用react框架需要注意什么-創(chuàng)新互聯(lián)
URL分享：http://m.kartarina.com/article24/cdcsje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、搜索引擎優(yōu)化、靜態(tài)網(wǎng)站、建站公司、電子商務(wù)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)