基于react框架使用的一些細(xì)節(jié)要點(diǎn)的思考
更新時(shí)間：2017年05月31日 09:00:52 投稿：jingxian
下面小編就為大家?guī)硪黄趓eact框架使用的一些細(xì)節(jié)要點(diǎn)的思考。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
這篇文章主要是寫關(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傳遞：
【(。?`ω´?)雖然聽起來有點(diǎn)怪怪的但是大家別介意哈】
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:'[基因]'}
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庫(kù)，像這樣：
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框架使用的一些細(xì)節(jié)要點(diǎn)的思考就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React中的useEffect(副作用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
如何不使用eject修改create-react-app的配置
許多剛開始接觸create-react-app框架的同學(xué)，不免都會(huì)有個(gè)疑問：如何在不執(zhí)行eject操作的同時(shí)，修改create-react-app的配置。2021-04-04
React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程
這篇文章主要介紹了React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了React hooks的優(yōu)缺點(diǎn)詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下， 希望能夠給你帶來幫助2021-09-09
React類組件和函數(shù)組件對(duì)比-Hooks的簡(jiǎn)介
Hook?是?React?16.8?的新增特性，它可以讓我們?cè)诓痪帉慶lass的情況下,?使用state以及其他的React特性(比如生命周期，這篇文章主要介紹了React類組件和函數(shù)組件對(duì)比-Hooks的介紹及初體驗(yàn),需要的朋友可以參考下2022-11-11
react-native聊天室|RN版聊天App仿微信實(shí)例|RN仿微信界面
這篇文章主要介紹了react-native聊天室|RN版聊天App仿微信實(shí)例|RN仿微信界面,需要的朋友可以參考下2019-11-11
react 頁(yè)面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件的兩種操作方法
這篇文章主要介紹了react 頁(yè)面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件,本文給大家分享兩種操作方法結(jié)合示例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
React-Native TextInput組件詳解及實(shí)例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
React Native (簡(jiǎn)稱RN)是Facebook于2015年4月開源的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架，是Facebook早先開源的JS框架 React 在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物，支持iOS和安卓?jī)纱笃脚_(tái)。本文將介紹React Native與IOS端之間的交互。2021-06-06