严重注意:要想改变state状态,必须通过setState进行修改,这样才能在页面上响应,不可直接更改,并且使用setState改变state状态的过程,是一个合并的动作,不是替换,只改变state中的一个属性,其他属性会保留原值
state是实例对象上的属性,而setState是react内置的类Component上的属性
constructor调用几次?
调1次,因为只创建了一个weather实例对象
render调用几次?
调1+n次,1是初始化的那次,n是状态更新的次数,就是页面更新的多少次,render就会调多少次
changeWeather调用几次?即类里面的方法会调几次?
点几次,调几次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setState的使用</title>
</head>
<body>
<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component {
// 想要对类里的实例对象的值进行操作,就要用到构造器
// 构造器调用几次? —— 1次
constructor(props) {
console.log('constructor')
super(props) // 继承的类,写了构造器的话,必须写super
// 改变state
this.state = { isHot: false, wind: '风' }
this.newWeather = this.changeWeather.bind(this) // 此处是使用bind将changeWeather方法中的this指向改为组件的实例对象 然后赋值给newWeather方法 因为bind返回的是一个新函数 需要重新调用
}
// render调用几次? —— 1+n次 1是初始化的那次,n是状态更新的次数
render() {
console.log('render')
return <h1 id='title' onClick= { this.newWeather }>今天天气很{ this.state.isHot ? '炎热' : '凉爽' }</h1>
}
// changeWeather调用几次? —— 点几次,调几次
changeWeather() {
// this.state.isHot = !this.state.isHot // 如果是这样写去改变页面内容,是改不掉的 这是直接更改
// 正确写法: 严重注意 state状态不可直接更改,上一行就是直接更改,必须通过setState进行修改
const isHot = this.state.isHot
this.setState({ isHot: !isHot })
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))
</script>
</body>
</html>