​   状态（state）是React组件内部的数据源，用于描述组件的状态。当组件的状态发生变化时，React会自动重新渲染组件，并将新的状态传递给组件的render方法，从而更新组件的UI。状态（state）是React中非常重要的一个概念，也是React组件的核心之一。通过状态（state），我们可以实现组件的动态更新，从而实现更加灵活和丰富的交互效果。

   state属性是每个React组件的私有属性，只能在组件内部使用。通过调用this.setState方法来更新state，setState接收一个对象，其中包含要更新的属性及其新值。React会自动合并这些变化，并只重新渲染需要更新的部分。

   需要注意的是，state应该始终视为只读属性。组件只能通过调用setState方法来更新它，而不能直接更改它的值。直接更改state属性的值可能会导致不可预期的结果，因为React可能会在其内部使用异步方式更新状态。

   另外，React中的state属性不仅可以存储简单的数据类型，还可以存储对象和数组等复杂数据类型。这使得开发者能够更灵活地控制组件的状态，提高组件的复用性和可维护性。

通过案例理解state

​ 案例功能：实现一个组件，组件内容：‘今天天气很炎热’ ，用户点击组件，组件内容变成：‘今天天气很凉爽’ .

简述：就是把【炎热】<===>【凉爽】，两个状态来回切换。

1、创建一个基础的类式组件

​ 为什么是类式组件？因为函数式组件中的this 指向是 undefined , 只有类式组件的 this才是指向的组件实例对象。

此时页面上只显示一段文字：“今天天气很炎热”。且对象中的state属性是null。

2、添加一个标识用于判断显示内容

​ 如何判断天气是否炎热，我们可以使用一个布尔值来做一个标识，且这个标识存在state对象中。

// 1、创建类式组件
class Weather extends React.Component {// 构造器调几次——1次constructor(props) {super(props)// 初始化状态this.state = {isHot:true}}render () {// render中的this在哪里？——MyComponent实例对象,MyComponent组件实例对象console.log(this)return 
今天天气很{this.state.isHot ? '炎热':'凉爽'}
}
}
// 2、将虚拟DOM渲染到页面，标签必须闭合
ReactDOM.render(,document.getElementById('app'))

我们根据react官网中“状态组件” 模仿一下，根据 isHot这个属性，配合三元运算，来控制其显示的状态。

3、绑定事件

​ 我们知道原生绑定事件，需要通过标签上的属性实现：

• 1、通过获取id拿到元素，在通过addEventListener方法绑定事件

const el = document.getElementById('id')
el.addEventListener('click',function(){console.log('事件处理')
})

• 2、通过获取id拿到元素，在通过onclick等等事件属性来实现

const el = document.getElementById('id')
el.onclick = () => {console.log('事件处理')
}

• 3、通过标签上面的属性，如：onclick等事件属性来实现

Click me

​ 在react的组件中，我们也可以用过id来绑定事件方法，功能也能实现，但是太繁琐，react推荐我们使用第三种方法，但有点不一样。

​ 在react中，对原生的事件进行了改写，可以使用on开头的属性来为元素添加事件监听器，例如onClick、onMouseOver等。这些属性可以用来为元素添加点击事件、鼠标移入事件等。

接下来我们尝试绑定一个demo函数：

// 1、创建类式组件
class Weather extends React.Component {// 构造器调几次——1次constructor(props) {super(props)// 初始化状态this.state = {isHot:true}}render () {// render中的this在哪里？——MyComponent实例对象,MyComponent组件实例对象console.log(this)return 
demo}>今天天气很{this.state.isHot ? '炎热':'凉爽'}
}
}
// 2、将虚拟DOM渲染到页面，标签必须闭合
ReactDOM.render(,document.getElementById('app'))// 创建demo函数
function demo () {console.log('触发demo方法')
}

但是这样写有很大的问题：就是demo函数中拿不到我们的state属性值，因为在babel中开启了严格模式，this的值是undefined ,当然我也能以复杂的方法拿到this。

// 在外部定义一个变量，用于存储类的实例对象
let that;// 1、创建类式组件
class Weather extends React.Component {// 构造器调几次——1次constructor(props) {super(props)// 初始化状态this.state = {isHot:true}// 获取实例对象，并赋值给thatthat = this}render () {// render中的this在哪里？——MyComponent实例对象,MyComponent组件实例对象console.log(this)return 
demo}>今天天气很{this.state.isHot ? '炎热':'凉爽'}
}
}
// 2、将虚拟DOM渲染到页面，标签必须闭合
ReactDOM.render(,document.getElementById('app'))// 创建demo函数
function demo () {console.log('触发demo方法')console.log(that.state.isHot)
}

​ 但是这种代码是不合格的，既然我们已经有了类，我们可以在类中定义方法，这样我们就可以直接拿到实例对象了。改写demo函数为changeWeather：

// 1、创建类式组件
class Weather extends React.Component {// 构造器调几次——1次constructor(props) {super(props)// 初始化状态this.state = {isHot:true}}// 定义changeWeather方法，用于改变组件状态changeWeather () {// 此时内部可以直接拿到组件实例的状态console.log(this.state.isHot)}render () {// render中的this在哪里？——MyComponent实例对象,MyComponent组件实例对象console.log(this)return 
changeWeather}>今天天气很{this.state.isHot ? '炎热':'凉爽'}
}
}
// 2、将虚拟DOM渲染到页面，标签必须闭合
ReactDOM.render(,document.getElementById('app'))

此时我们在浏览器中点击组件标题，会报一个错误：

changeWeather is not defined

这是因为在onClick事件属性中的方法，需要通过类的实例对象调用，也就是组件实例对象。我们加一个this就可以了。

onClick={this.changeWeather}

到这里，你是不是以为不会报错了？但是控制台又报错了！！！！

state is not defined

我直接人傻了！！！！！

静下心来思考为什么？

• 思考1：打印方法中的this

changeWeather () {// 打印thisconsole.log(this)
}

我们在浏览器的控制台，可以看到此时的this值是undefined , 这是为什么？

按道理讲，通过组件实例调用的方法，this的值应该就是组件实例本身才对，为什么是undefined?

• 思考2：既然this不是组件实例，说明是调用方式有问题

onClick={this.changeWeather}

​ 注意以上代码，这是将实例的一个方法赋值给react，成为一个回调函数，让react去调用这个方法，此时的调用方式属于直接调用。

​ 又想到类中的方法默认开启了严格模式，所以方法changeWeather中的this是undefined。

• 思考3：解决this指向问题

  既然方法中的this是undefined，那我们就给他绑定一个新的this。

constructor(props) {super(props)this.state = {isHot:false}// 解决changeWeather中this的指向this.changeWeather = this.changeWeather.bind(this)
}

我们在构造器函数中，使用bind方法将组件实例传入，并返回一个新的函数赋值给组件实例自身。此时方法中的this指向就是组件实例了。

4、更改state状态

此时我们已经确定在方法中已经拿到了组件实例，可以放心更改状态的布尔值了

changeWeather () {// 获取state对象属性值isHotconst isHot = this.state.isHotthis.state.isHot = !isHotconsole.log(this.state.isHot)
}

此时我们到浏览器点击组件标题，结果页面并没有发生任何变化，我人傻了！！！！

查看控制台，我们发现状态值已经被我们改变了，为什么页面没有任何变化呢？

原来状态不能直接更改，需要借助react的内置API：setState 进行更改才能生效!

changeWeather () {// 获取state对象属性值isHotconst isHot = this.state.isHotthis.setState({isHot:!isHot})
}

此时我们点击组件标题，可以看到页面内容实时更新了。

组件案例归纳

• 1、组件构造器执行了几次？

  组件初始化时执行一次。

• 2、组件的render方法执行了几次？

  组件初始化执行一次，每更新组件一次就执行一次。

• 3、组件的changeWeather方法执行了几次？

  这个就和绑定的事件有关了，你点几次就触发几次。

• 4、组件状态能直接修改吗？

  不能直接修改，必须配合setState这个内置的API进行修改状态。

精简代码

class Weather extends React.Component {// 初始化状态state = {isHot:false}render () {const {isHot} = this.statereturn 
this.changeWeather}>今天天气很{isHot ? '炎热': '凉爽'}
}// 自定义方法——要用赋值语句+箭头函数changeWeather = ()=>{ // 箭头函数没有this，会指向外层的this，也就是组件实例const isHot = this.state.isHotthis.setState({isHot:!isHot})}
}
// 2、将虚拟DOM渲染到页面，标签必须闭合
ReactDOM.render(,document.getElementById('app'))

• 1、去掉了类的构造函数

  如果类不需要初始化外部传入的参数，则可以直接通过赋值语句添加自身的属性。

• 2、自定义方法的this 绑定不需要在构造器里面完成

  自定义方法通过赋值语句和箭头函数代替，赋值语句使得changeWeather方法变成自己自身属性，箭头函数内部没有this, 会去查找函数外部的this，而外部的this恰好是组件的实例对象。