state
- 有狀態state的組件稱作復雜組件,沒有狀態的組件稱為簡單組件
- 狀態里存盤資料,資料的改變驅動頁面的展示
<script type="text/babel">
// 創建組件
class Weather extends React.Component {
// 構造器呼叫1次
constructor(props) {
super(props);
// 必須接收物件
this.state = { isHot: true };
// 左邊為實體物件,實體物件原本沒有changeWeather
// 順著原型物件查找到changeWeather , 再由bind修改系結的this
// 最后左側多出了個函式,并賦值為changeWeather
this.changeWeather = this.changeWeather.bind(this);
}
// render呼叫 1+n次 初始1次,更新n次
render() {
// 給事件指定回呼函式,不是賦值,不要有括號
// onClick中C要大寫
// 這里的changeWeather是實體的changeWeather
return <h1 onClick={this.changeWeather} >今天天氣{this.state.isHot ? '炎熱' : '涼爽'}</h1>
}
// changeWeather放在Weather的原型物件上,供實體使用
// 由于changeWeather是onClick的回呼,所以不是通過實體呼叫的,而是直接呼叫的
// 類中的方法默認開啟了區域的嚴格模式 ,所以changeWeather中的this是undefined
// 更新n次,呼叫n次
changeWeather() {
// 狀態里的資料不能直接修改,以下就是直接修改
// 要借助內置的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>
}
// 箭頭函式沒有this,但會找外層函式的this
// 屬于自定義方法,算是賦值陳述句
changeWeather = () => {
const isHot = this.state.isHot;
this.setState({ isHot: !isHot });
}
}
const root = ReactDOM.createRoot(document.getElementById('test'));
root.render(<Weather />);
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542634.html
標籤：其他
上一篇：模塊化開發
下一篇：移動端 H5 實作拍照功能