基于react框架使用的一些細(xì)節(jié)要點(diǎn)的思考
這篇文章主要是寫關(guān)于學(xué)習(xí)react中的一些自己的思考:
1.setState到底是同步的還是異步的?
2.如何在子組件中改變父組件的state
3.context的運(yùn)用,避免“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ǎn)擊按鈕時(shí),調(diào)用handleClick函數(shù),首先調(diào)用this.setState()設(shè)置value,隨即把this.state.value輸出,結(jié)果是什么?
你可能會想,這還不簡單——“在handleClick里輸出1”唄,然而你錯(cuò)了,它的結(jié)果為:
事實(shí)上,setState()的調(diào)用是異步的,這意味著,雖然你調(diào)用了setState({value:0}),但this.state.value并不會馬上變成0,而是直到render()函數(shù)調(diào)用時(shí),setState()才真正被執(zhí)行。結(jié)合圖說明一下:

我們對handleClick做一些修改,讓它變得復(fù)雜一點(diǎn),在調(diào)用handleClick的時(shí)候,依次調(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é)要點(diǎn)的思考就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
React中的useState和useEffect詳細(xì)解析
useState和useEffect是React的兩個(gè)重要Hook,用于組件狀態(tài)管理和處理副作用,useState允許添加狀態(tài)變量,控制組件渲染,而useEffect用于執(zhí)行渲染后的副作用操作,本文給大家介紹React中的useState和useEffect詳細(xì)解析,感興趣的朋友跟隨小編一起看看吧2024-10-10react組件中的constructor和super知識點(diǎn)整理
這篇文章主要介紹了react組件中的constructor和super知識點(diǎn)整理,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08React使用TypeScript的最佳實(shí)踐和技巧
在React項(xiàng)目中使用TypeScript可以顯著提高代碼的可維護(hù)性和可讀性,并提供強(qiáng)大的類型檢查功能,減少運(yùn)行時(shí)錯(cuò)誤,以下是一些優(yōu)雅地將TypeScript集成到React項(xiàng)目中的最佳實(shí)踐和技巧,需要的朋友可以參考下2024-06-06React Native實(shí)現(xiàn)簡單的登錄功能(推薦)
這篇文章主要介紹了React Native實(shí)現(xiàn)登錄功能的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09