react組件實(shí)例屬性state詳解
react組件實(shí)例屬性state
state
- 有狀態(tài)state的組件稱作復(fù)雜組件,沒有狀態(tài)的組件稱為簡(jiǎn)單組件
- 狀態(tài)里存儲(chǔ)數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動(dòng)頁面的展示
<script type="text/babel"> // 創(chuàng)建組件 class Weather extends React.Component { // 構(gòu)造器調(diào)用1次 constructor(props) { super(props); // 必須接收對(duì)象 this.state = { isHot: true }; // 左邊為實(shí)例對(duì)象,實(shí)例對(duì)象原本沒有changeWeather // 順著原型對(duì)象查找到changeWeather , 再由bind修改綁定的this // 最后左側(cè)多出了個(gè)函數(shù),并賦值為changeWeather this.changeWeather = this.changeWeather.bind(this); } // render調(diào)用 1+n次 初始1次,更新n次 render() { // 給事件指定回調(diào)函數(shù),不是賦值,不要有括號(hào) // onClick中C要大寫 // 這里的changeWeather是實(shí)例的changeWeather return <h1 onClick={this.changeWeather} >今天天氣{this.state.isHot ? '炎熱' : '涼爽'}</h1> } // changeWeather放在Weather的原型對(duì)象上,供實(shí)例使用 // 由于changeWeather是onClick的回調(diào),所以不是通過實(shí)例調(diào)用的,而是直接調(diào)用的 // 類中的方法默認(rèn)開啟了局部的嚴(yán)格模式 ,所以changeWeather中的this是undefined // 更新n次,調(diào)用n次 changeWeather() { // 狀態(tài)里的數(shù)據(jù)不能直接修改,以下就是直接修改 // 要借助內(nèi)置的api更改 // 以下這種寫法并未改變state // this.state.isHot = !this.state.isHot; // 要這樣更新,且更新是合并更新,未修改的不變 const isHot = this.state.isHot; this.setState({ isHot: !isHot }); } } // 渲染組件 const root = ReactDOM.createRoot(document.getElementById('test')); root.render(<Weather />); </script>
state簡(jiǎn)寫
class Weather extends React.Component { state = { isHot: true }; render() { return <h1 onClick={this.changeWeather} >今天天氣{this.state.isHot ? '炎熱' : '涼爽'}</h1> } // 箭頭函數(shù)沒有this,但會(huì)找外層函數(shù)的this // 屬于自定義方法,算是賦值語句 changeWeather = () => { const isHot = this.state.isHot; this.setState({ isHot: !isHot }); } } const root = ReactDOM.createRoot(document.getElementById('test')); root.render(<Weather />); </script>
補(bǔ)充:react中的state詳解
state
理解:state是組件對(duì)象最重要的屬性,值是對(duì)象(可以包含多個(gè)key—value組合)
state中的值可以修改,修改的唯一方法是調(diào)用this.setState,每次修改以后,自動(dòng)調(diào)用 this.render 方法,再次渲染組件。(也就是說直接
this.state.num=2
這樣直接修改值是無效的)
state在組件的構(gòu)造函數(shù)中賦值
class View extends Component{ constructor(){ super(); this.state={ num:10 } } //state={num:10} 直接做為實(shí)例屬性也可以 }
setState有兩種格式
- 傳一個(gè)對(duì)象
直接修改state的值
因?yàn)?this.props 和 this.state 可能會(huì)異步更新,所以不能依賴他們的值來更新下一個(gè)狀態(tài)。解決辦法讓 setState() 接收一個(gè)函數(shù)
this.setState({})
- 傳一個(gè)函數(shù)
接收兩個(gè)參數(shù)preState,props
更新前的state,更新后的props
修改state自身的值(例:state.num+4)
// 傳函數(shù)的兩種寫法 // 普通函數(shù) this.setState(function(state,props){ return {num:state.num--} }) // 箭頭函數(shù) this.setState((state,props)=>({num:state.num}))
遍歷state的值,循環(huán)渲染頁面
list(){ return this.state.lists.map((v,i)=>(<li key={i}>{v}</li>)) } //直接在dom中渲染即可(因?yàn)閞ender會(huì)執(zhí)行兩次,所以要進(jìn)行簡(jiǎn)單的處理) <ul>{this.state.lists.length!==0:this.list():'';}</ul>
到此這篇關(guān)于react組件實(shí)例屬性state的文章就介紹到這了,更多相關(guān)react組件實(shí)例屬性state內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React調(diào)度系統(tǒng)Scheduler工作原理詳解
這篇文章主要為大家介紹了React調(diào)度系統(tǒng)Scheduler工作原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03react18?hooks自定義移動(dòng)端Popup彈窗組件RcPop
這篇文章主要介紹了react18?hooks自定義移動(dòng)端Popup彈窗組件RcPop,react-popup?基于react18+hook自定義多功能彈框組件,整合了msg/alert/dialog/toast及android/ios彈窗效果,需要的朋友可以參考下2023-08-08react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解
這篇文章主要為大家介紹了react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05詳解如何封裝和使用一個(gè)React鑒權(quán)組件
JavaScript?和?React?提供了靈活的事件處理機(jī)制,特別是通過利用事件的捕獲階段來阻止事件傳播可以實(shí)現(xiàn)精細(xì)的權(quán)限控制,本文將詳細(xì)介紹這一技術(shù)的應(yīng)用,并通過實(shí)踐案例展示如何封裝和使用一個(gè)?React?鑒權(quán)組件,需要的可以參考下2024-03-03React Hook 監(jiān)聽localStorage更新問題
這篇文章主要介紹了React Hook 監(jiān)聽localStorage更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10淺談React多個(gè)setState會(huì)調(diào)用幾次
在React的生命周期鉤子和合成事件中,多次執(zhí)行setState,會(huì)被調(diào)用幾次,本文就詳細(xì)的介紹一下,感興趣的可以了解一下2021-11-11詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個(gè)重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個(gè)Hooks看起來很相似,但它們彼此之間還是有很大的區(qū)別的,隨著小編一起來學(xué)習(xí)吧2023-04-04