reactjs组件实例的三大属性之state属性使用示例
生活随笔
收集整理的這篇文章主要介紹了
reactjs组件实例的三大属性之state属性使用示例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
默認寫法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>state</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.創(chuàng)建組件class Weather extends React.Component{//構(gòu)造器調(diào)用幾次？ ———— 1次constructor(props){console.log('constructor');super(props)//初始化狀態(tài)this.state = {isHot:false,wind:'微風'}//解決changeWeather中this指向問題this.changeWeather = this.changeWeather.bind(this)}//render調(diào)用幾次？ ———— 1+n次 1是初始化的那次 n是狀態(tài)更新的次數(shù)render(){console.log('render');//讀取狀態(tài)const {isHot,wind} = this.statereturn <h1 onClick={this.changeWeather}>今天天氣很{isHot ? '炎熱' : '涼爽'}，{wind}</h1>}//changeWeather調(diào)用幾次？ ———— 點幾次調(diào)幾次changeWeather(){//changeWeather放在哪里？ ———— Weather的原型對象上，供實例使用//由于changeWeather是作為onClick的回調(diào)，所以不是通過實例調(diào)用的，是直接調(diào)用//類中的方法默認開啟了局部的嚴格模式，所以changeWeather中的this為undefinedconsole.log('changeWeather');//獲取原來的isHot值const isHot = this.state.isHot//嚴重注意：狀態(tài)必須通過setState進行更新,且更新是一種合并，不是替換。this.setState({isHot:!isHot})console.log(this);//嚴重注意：狀態(tài)(state)不可直接更改，下面這行就是直接更改！！！//this.state.isHot = !isHot //這是錯誤的寫法}}//2.渲染組件到頁面ReactDOM.render(<Weather/>,document.getElementById('test'))</script> </body> </html>state簡寫方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>state簡寫方式</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.創(chuàng)建組件class Weather extends React.Component{//初始化狀態(tài)state = {isHot:false,wind:'微風'}render(){const {isHot,wind} = this.statereturn <h1 onClick={this.changeWeather}>今天天氣很{isHot ? '炎熱' : '涼爽'}，{wind}</h1>}//自定義方法————要用賦值語句的形式+箭頭函數(shù)changeWeather = ()=>{const isHot = this.state.isHotthis.setState({isHot:!isHot})}}//2.渲染組件到頁面ReactDOM.render(<Weather/>,document.getElementById('test'))</script> </body> </html>點擊文字會進行切換——
總結(jié)
以上是生活随笔為你收集整理的reactjs组件实例的三大属性之state属性使用示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： k8s operator开发脚手架kub
- 下一篇： k8s minikube管理镜像相关命令