状态（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才是指向的组件实例对象。
<!-- 准备好员工“容器” --> <div id="app"></div> <!-- 引入ReactJS核心库 --> <script type="text/javascript" src="../JS/react.development.js"></script> <!-- 引入React-DOM核心库，用于操作DOM --> <script type="text/javascript" src="../JS/react-dom.development.js"></script> <!-- 引入Babel，用于编译jsx为js --> <script type="text/javascript" src="../JS/babel.min.js"></script> <!-- 此处类型为babel --> <script type="text/babel"> // 1、创建类式组件 class Weather extends React.Component { render () { // render中的this在哪里？——MyComponent实例对象,MyComponent组件实例对象 console.log(this) return <h2>今天天气很炎热</h2> } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Weather/>,document.getElementById('app')) </script>
此时页面上只显示一段文字：“今天天气很炎热”。且对象中的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 <h2>今天天气很{this.state.isHot ? '炎热':'凉爽'}</h2> } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Weather/>,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等事件属性来实现
<button onclick="alert('Button clicked!')">Click me</button>
在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 <h2 onClick={demo}>今天天气很{this.state.isHot ? '炎热':'凉爽'}</h2> } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Weather/>,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} // 获取实例对象，并赋值给that that = this } render () { // render中的this在哪里？——MyComponent实例对象,MyComponent组件实例对象 console.log(this) return <h2 onClick={demo}>今天天气很{this.state.isHot ? '炎热':'凉爽'}</h2> } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Weather/>,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 <h2 onClick={changeWeather}>今天天气很{this.state.isHot ? '炎热':'凉爽'}</h2> } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Weather/>,document.getElementById('app'))
此时我们在浏览器中点击组件标题，会报一个错误：
changeWeather is not defined
这是因为在onClick事件属性中的方法，需要通过类的实例对象调用，也就是组件实例对象。我们加一个this就可以了。
onClick={this.changeWeather}
到这里，你是不是以为不会报错了？但是控制台又报错了！！！！
state is not defined
我直接人傻了！！！！！
静下心来思考为什么？
- 思考1：打印方法中的this
changeWeather () { // 打印this console.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对象属性值isHot const isHot = this.state.isHot this.state.isHot = !isHot console.log(this.state.isHot) }
此时我们到浏览器点击组件标题，结果页面并没有发生任何变化，我人傻了！！！！
查看控制台，我们发现状态值已经被我们改变了，为什么页面没有任何变化呢？
原来状态不能直接更改，需要借助react的内置API：setState 进行更改才能生效!
changeWeather () { // 获取state对象属性值isHot const isHot = this.state.isHot this.setState({isHot:!isHot}) }
此时我们点击组件标题，可以看到页面内容实时更新了。
组件案例归纳
1、组件构造器执行了几次？
组件初始化时执行一次。
2、组件的render方法执行了几次？
组件初始化执行一次，每更新组件一次就执行一次。
3、组件的changeWeather方法执行了几次？
这个就和绑定的事件有关了，你点几次就触发几次。
4、组件状态能直接修改吗？
不能直接修改，必须配合setState这个内置的API进行修改状态。
精简代码
class Weather extends React.Component { // 初始化状态 state = {isHot:false} render () { const {isHot} = this.state return <h2 onClick={this.changeWeather}>今天天气很{isHot ? '炎热': '凉爽'}</h2> } // 自定义方法——要用赋值语句+箭头函数 changeWeather = ()=>{ // 箭头函数没有this，会指向外层的this，也就是组件实例 const isHot = this.state.isHot this.setState({isHot:!isHot}) } } // 2、将虚拟DOM渲染到页面，标签必须闭合 ReactDOM.render(<Weather/>,document.getElementById('app'))
1、去掉了类的构造函数
如果类不需要初始化外部传入的参数，则可以直接通过赋值语句添加自身的属性。
2、自定义方法的this 绑定不需要在构造器里面完成
自定义方法通过赋值语句和箭头函数代替，赋值语句使得changeWeather方法变成自己自身属性，箭头函数内部没有this, 会去查找函数外部的this，而外部的this恰好是组件的实例对象。
