补充：
1.箭头函数： ES6 中声明函数的一种方式，更简短的函数并且不绑定 this。
var f = ([参数]) => 表达式（单一）
// 等价于以下写法
var f = function([参数]){
return 表达式;
}
箭头函数的基本语法如下：
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
2.复习类中的this指向
<!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>Document</title>
</head>
<body>
<script type="text/javascript">
class Person
{
constructor (name,age){
this.name = name;
this.age = age;
}
speak()
// speak方法放在类的原型对象上，供实例使用
// 通过person实例调用speak时，speak中的this就是person实例
{
console.log(this)
}
}
const p1 = new Person('小明',18)
p1.speak()//通过实例调用speak
</script>
</body>
</html>
3.setState的使用
至此，已经实现了点击切换状态
<!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>Document</title>
</head>
<body>
<div id= 'test'></div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 创建
class Weather extends React.Component {
// 构造器调用1次
constructor(props) {
super(props)
//初始化状态
this.state = {
ishot:false,
wind:'微风'
}
// 解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)//bind生成一个新的函数，改了函数中的this
}
// render调用1+n次
render(){
console.log(this)
// 读取状态
const {ishot,wind}=this.state
return <h1 id="title" onClick={this.changeWeather}>今天天气很{ishot ? '炎热': '凉爽'}.{wind}</h1>
}
// changeWeather调用次数：点几次调用几次
changeWeather()
{
// changeWeather放在Weather的原型对象上，供实例使用
// 通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例
// 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，而是直接调用的、
// 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
// 获取原来的ishot值
const ishot =this.state.ishot
// 状态不可直接更改，下面这行就是直接更改
// this.state.ishot = !ishot//错误写法
// 状态更新要借助一个API，setState进行更改,且更新是一种合并，不是替换
// this.setState({ishot: !ishot})
this.setState({ishot:!ishot})
}
}
// 渲染
ReactDOM.render(<Weather/>,document.getElementById('test'))
// const title = document.getElementById('title')
// title.addEventListener('click',()=>{
// console.log('标题被点击了')
// })
// const title = document.getElementById("title");
// title.onclick = ()=>{
// alert('按钮2被点击了')
// }
</script>
</body>
</html>
4.复习类中添加属性（不必写在构造器中，可直接添加）
<!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>Document</title>
</head>
<body>
<script type="text/javascript">
/*
总结：
1.类中的构造器不是必须写的
2.要对实例进行一些初始化操作时才写，如添加指定属性
3.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须调用的
4.类中所定义的方法都是放在类的原型对象上
*/
// 创建一个类
class Person{
// 构造器方法
constructor(name,age){
// 构造器中的this是类的实例对象
this.name = name
this.age = age
}
// 一般方法
speak(){
// speak方法放在类的原型对象上，供实例使用
// 通过person实例调用speak时，speak中的this就是person实例
console.log(`我叫${this.name},年龄${this.age}`)
}
}
// 创建一个Person的实例对象
const p1 = new Person('tom',18)
const p2 = new Person('jerry',20)
console.log(p1)
console.log(p2)
p1.speak()
p2.speak()
// 创建一个Student类，继承Person类
class Student extends Person{
constructor(name,age,grade){
super(name,age)//必须放在第一行
this.grade = grade
}
// 重写从父类继承过来的方法
speak(){
console.log(`我叫${this.name},年龄${this.age},年级${this.grade}`)
}
// study方法放在类的原型对象上，供实例使用
// 通过student实例调用study时，study中的this就是student实例
study(){
console.log('我很努力学习')
}
}
const s1 = new Student('张',15,'高一')
console.log(s1)
s1.speak()
class Car{
constructor(name,price){
this.name=name
this.price=price
// this.wheel=4
}
// 类中可以直接写赋值语句
// 给Car的实例对象添加一个属性，名为wheel,值为4
wheel = 1
}
const c1 = new Car('奔驰',10)
console.log(c1)
</script>
</body>
</html>
5.state【简写】
<!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>Document</title>
</head>
<body>
<div id= 'test'></div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 创建
class Weather extends React.Component {
// 构造器调用1次
// 【简化】构造器不需使用
// constructor(props) {
// super(props)
// //初始化状态 (【简化】)
// // this.state = {ishot:false,wind:'微风'}
// // 解决changeWeather中this指向问题
// // this.changeWeather = this.changeWeather.bind(this)//bind生成一个新的函数，改了函数中的this
// }
state ={ishot:false, wind:'微风'}
// render调用1+n次
render(){
console.log(this)
// 读取状态
const {ishot,wind}=this.state
return <h1 id="title" onClick={this.changeWeather}>今天天气很{ishot ? '炎热': '凉爽'}.{wind}</h1>
}
// changeWeather调用次数：点几次调用几次
// 【简化】，将changeWeather使用赋值语句方式写，并且使用箭头函数，箭头函数没有this，会找外层的this
// 自定义方法，要用赋值语句形式+箭头函数
changeWeather = ()=>
{
// changeWeather放在Weather的原型对象上，供实例使用
// 通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例
// 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，而是直接调用的、
// 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
// 获取原来的ishot值
const ishot =this.state.ishot
// 状态不可直接更改，下面这行就是直接更改
// this.state.ishot = !ishot//错误写法
// 状态更新要借助一个API，setState进行更改,且更新是一种合并，不是替换
// this.setState({ishot: !ishot})
this.setState({ishot:!ishot})
}
}
// 渲染
ReactDOM.render(<Weather/>,document.getElementById('test'))
// const title = document.getElementById('title')
// title.addEventListener('click',()=>{
// console.log('标题被点击了')
// })
// const title = document.getElementById("title");
// title.onclick = ()=>{
// alert('按钮2被点击了')
// }
</script>
</body>
</html>
6.state总结
（1）state是组件对象最为重要的属性，值是对象（可以包含多个key-value组合）
（2）组件被称为状态机，通过更新组件的state来更新对应的页面显示（重新渲染组件）
【注意】
（1）组件render方法中的this为组件实例对象
（2）组件自定义的方法中this为undefined，如何解决？
a.强制绑定this，使用函数对象的bind()
b.箭头函数
(3)状态数据，不能直接更改，要使用setSate