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

btn2.onclick = ()=>{

alert(‘按钮2被点击了’)

}

//方式三

function demo(){

alert(‘按钮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的回调，所以不是通过实例调用的，是直接调用

// 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

console.log(‘changeWeather’);

// 获取原来的isHot值

const isHot = this.state.isHot

// 严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。

this.setState({isHot:!isHot})

// console.log(this);

// 严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！

// this.state.isHot = !isHot //这是错误的写法

}

}

//2.渲染组件到页面

ReactDOM.render(,document.getElementById(‘test’))

---

精简代码（实际开发中这样写）

1. 可以不写构造器，类中直接写赋值语句来初始化状态

2. 不用bind来绑定this（赋值语句的形式+箭头函数）

// 1.创建组件

class Weather extends React.Component{

// 初始化状态

state = {isHot:false,wind:‘微风’}

render(){

const {isHot,wind} = this.state

return

今天天气很{isHot ? ‘炎热’ : ‘凉爽’}，{wind}

}

// 自定义方法————要用赋值语句的形式+箭头函数

// 没有放在原型上，而是放在实例上

changeWeather = () => {

const isHot = this.state.isHot

this.setState({isHot:!isHot})

}

}

// 2.渲染组件到页面

ReactDOM.render(,document.getElementById(‘test’))

---

【补充】类中直接写赋值语句

在类中直接写赋值语句，等于是给类的实例对象添加属性且赋值

2.1.3 state案例总结

1. 组件中render方法中的this为组件实例对象

2. 组件自定义的方法中this为undefined，如何解决？

a) 强制绑定this: 通过函数对象的bind()

b) 箭头函数 + 赋值语句

3. 状态数据state，不能直接修改或更新

4. 状态必须通过setState()进行更新, 且更新是一种合并，不是替换。

2.2 props属性

---

2.2.1理解

1. 每个组件的实例对象都会有props(properties的简写)属性

2. 组件标签的所有属性都保存在props中