代码解释:
执行了ReactDOM.render(< MyComponent/>…之后,发生了什么?
React解析组件标签,找到了MyComponent组件。
发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
=============================================================================
2.1.1理解
-
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
-
组件被称为“状态机”,通过更新组件实例的state来更新对应的页面显示(重新渲染组件)
-
组件里面维护着状态 ————> 状态里存着数据 ————> 在更新状态里的数据时 ————> 组件达到一次重新渲染(比如render再帮你调用一次)
下面图片可以更方便理解:
2.1.2 案例应用
需求:定义一个展示天气信息的组件
-
默认展示天气炎热 或 凉爽
-
点击文字切换天气
手动切换板
类式组件,在构造器中_初始化状态_,在render
中通过this.state
读取状态
// 1. 创建组件
class Weather extends React.Component{
constructor(props) {
super(props)
// 初始化状态
this.state = {
isHot: true
}
}
render() {
// 读取状态
const {isHot} = this.state
return
今天天气很{isHot?‘炎热’:‘凉爽’}
}
}
// 2. 渲染组件到页面
ReactDOM.render(, document.getElementById(‘test’))
【补充】原生JavaScript绑定事件监听的三种方式
按钮1
按钮2
按钮3
点击切换版
// 1.创建组件
class Weather extends React.Component {
// 构造器调用几次? ———— 1次
constructor(props){
super(props)
// 初始化状态
this.state = {isHot:false,wind:‘微风’}
// 解决 changeWeather 中 this 指向问题
this.changeWeather = this.changeWeather.bind(this)
}
// render调用几次? ———— 1+n次 1是初始化的那次 n是状态更新的次数
render(){
console.log(‘render’);
//读取状态
const {isHot,wind} = this.state
return
今天天气很{isHot ? ‘炎热’ : ‘凉爽’},{wind}
}
// changeWeather调用几次? ———— 点几次调几次
changeWeather(){
// changeWeather放在哪里? ———— Weather的原型对象上,供实例使用
// 由于changeWeather是作为onClick的回调