2.2.2. 理解
1.state是組件對象最重要的屬性, 值是對象(可以包含多個(gè)key-value的組合)
2.組件被稱為"狀態(tài)機(jī)", 通過更新組件的state來更新對應(yīng)的頁面顯示(重新渲染組件)
2.2.3. 強(qiáng)烈注意
1.組件中render方法中的this為組件實(shí)例對象
2.組件自定義的方法中this為undefined，如何解決？
a)強(qiáng)制綁定this: 通過函數(shù)對象的bind()
b)箭頭函數(shù)
3.狀態(tài)數(shù)據(jù)，不能直接修改或更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_類式組件.html</title>
</head>
<body>
<!-- 準(zhǔn)備好一個(gè)容器 -->
<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>
<!-- 引入babe1,用于將jsx轉(zhuǎn)為js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/* 此處一定要寫babel */
class Weather extends React.Component{
// 初始化狀態(tài)
state={isHot:false,wind:'微風(fēng)'}
render(){
const {isHot,wind}=this.state
return (
<h1 onClick={this.changeWeather}>今天天氣很{isHot?'炎熱':'涼爽'},{wind}</h1>
)
}
// 自定義方法——要用賦值語句的形式+箭頭函數(shù)
changeWeather=()=>{
const isHot=this.state.isHot;
this.setState({isHot:!isHot})
}
}
// 2、渲染組件到頁面
ReactDOM.render(<Weather/>,document.getElementById('test'));
</script>
</body>
</html>
