這篇文章主要是寫關(guān)于學(xué)習(xí)react中的一些自己的思考：
1.setState到底是同步的還是異步的？
2.如何在子組件中改變父組件的state
3.context的運用，避免“props傳遞地獄”
4.組件類里有私有變量a，它到底改放在this.a中還是this.state對象中（作為屬性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ào)用handleClick函數(shù)，首先調(diào)用this.setState()設(shè)置value,隨即把this.state.value輸出，結(jié)果是什么？
你可能會想，這還不簡單――“在handleClick里輸出1”唄，然而你錯了，它的結(jié)果為：
事實上，setState()的調(diào)用是異步的，這意味著，雖然你調(diào)用了setState({value:0})，但this.state.value并不會馬上變成0，而是直到render()函數(shù)調(diào)用時，setState()才真正被執(zhí)行。結(jié)合圖說明一下：
我們對handleClick做一些修改，讓它變得復(fù)雜一點，在調(diào)用handleClick的時候，依次調(diào)用handleStateChange1 ，handleStateChange2，handleStateChange3，它們會調(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();}
2.如何在子組件中改變父組件的state呢？
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>) }}
class Son extends React.Component{ render(){ return (<h3 style ={{marginTop:30}}>我從我的爺爺那里得到了基因--{this.props.gene}</h3>) } }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}/>) }}
class Son extends React.Component{ render(){ console.log(this.context.color); return (<h3 style ={{marginTop:30}}>我從我的爺爺那里得到了基因--{this.context.gene}</h3>) }}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
getChildContext(){ return {type:this.state.type}}const PropTypes = require("Prop-Types");GrandFather.childContextTypes = { gene: PropTypes.string}; 以上這篇基于react框架使用的一些細節(jié)要點的思考就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
