React（2）—— React组件、组件实例三大属性、事件处理、受控组件与非受控组件、高阶函数(2)

代码解释：

执行了ReactDOM.render(< MyComponent/>…之后，发生了什么？

React解析组件标签，找到了MyComponent组件。

发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。

将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

2.组件实例三大属性

=============================================================================

2.1 state属性

---

2.1.1理解

• state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

• 组件被称为“状态机”，通过更新组件实例的state来更新对应的页面显示（重新渲染组件）

• 组件里面维护着状态 ————> 状态里存着数据 ————> 在更新状态里的数据时 ————> 组件达到一次重新渲染（比如render再帮你调用一次）

下面图片可以更方便理解：

2.1.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的回调，