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