基于react框架使用的一些細(xì)節(jié)要點的思考
這篇文章主要是寫關(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>)
}
}


getChildContext(){
return {type:this.state.type}
}
const PropTypes = require("Prop-Types");
GrandFather.childContextTypes = {
gene: PropTypes.string
};
以上這篇基于react框架使用的一些細(xì)節(jié)要點的思考就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何不使用eject修改create-react-app的配置
許多剛開始接觸create-react-app框架的同學(xué),不免都會有個疑問:如何在不執(zhí)行eject操作的同時,修改create-react-app的配置。2021-04-04
React+Typescript項目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程
這篇文章主要介紹了React+Typescript項目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程,本文通過圖文實例相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面
這篇文章主要介紹了react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面,需要的朋友可以參考下2019-11-11
react 頁面加載完成后自動執(zhí)行標(biāo)簽的點擊事件的兩種操作方法
這篇文章主要介紹了react 頁面加載完成后自動執(zhí)行標(biāo)簽的點擊事件,本文給大家分享兩種操作方法結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12
React-Native TextInput組件詳解及實例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10

