有状态组件和无状态组件
函数组件又叫做 无状态组件，类组件又叫做 有状态组件
状态(state) 即数据
函数组件没有自己的状态，只负责数据展示
类组件有自己的状态，负责更新UI，让页面动起来
State和SetState（★★★）
state基本使用
状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据
通过this.state来获取状态
示例demo
exportdefaultclassextendsReact.Component { constructor(){ super() // 第一种初始化方式this.state= { count : 0 } } // 第二种初始化方式state= { count:1 } render(){ return ( <div>计数器 :{this.state.count}</div> ) } }
setState() 修改状态
状态是可变的
语法：this.setState({要修改的数据})
注意：不要直接修改state中的值，这是错误的
setState() 作用：1.修改 state 2.更新UI
思想：数据驱动视图
示例demo
exportdefaultclassextendsReact.Component { // 第二种初始化方式state= { count:1 } render(){ return ( <div><div>计数器 :{this.state.count}</div><buttononClick={() => { this.setState({ count: this.state.count+1 }) }}>+1</button></div> ) } }
小结
修改state里面的值我们需要通过 this.setState() 来进行修改
React底层会有监听，一旦我们调用了setState导致了数据的变化，就会重新调用一次render方法，重新渲染当前组件
抽取事件处理函数
当我们把上面代码的事件处理程序抽取出来后，会报错，找不到this
原因
在JSX中我们写的事件处理函数可以找到this，原因在于在JSX中我们利用箭头函数，箭头函数是不会绑定this，所以会向外一层去寻找，外层是render方法，在render方法里面的this刚好指向的是当前实例对象
事件绑定this指向
箭头函数
利用箭头函数自身不绑定this的特点
利用bind方法（★★★）
利用原型bind方法是可以更改函数里面this的指向的，所以我们可以在构造中调用bind方法，然后把返回的值赋值给我们的函数即可
classAppextendsReact.Component { constructor() { super() ... // 通过bind方法改变了当前函数中this的指向this.onIncrement=this.onIncrement.bind(this) } // 事件处理程序onIncrement() { ... } render() { ... } }
class的实例方法（★★★）
利用箭头函数形式的class实例方法
注意：该语法是实验性语法，但是，由于babel的存在可以使用
// 事件处理程序onIncrement= () => { console.log('事件处理程序中的this：', this) this.setState({ count: this.state.count+1 }) }
小结
推荐：使用class的实例方法，也是依赖箭头函数不绑定this的原因
