🌈个人主页：前端青山 🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来React篇专栏内容:React-State状态
如果将state与vue中的某个点做类比的话，则其相当于vue组件中的
data，作用就是用于存储当前组件中需要用到的数据。
目录
1、基本使用
2、修改状态
React中的setState执行机制
一、是什么
二、更新类型
异步更新
同步更新
小结
三、批量更新
小结
状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同。
state状态只在class类组件才有，函数组件没有此功能！
1、基本使用
- 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
- state的值是对象，表示一个组件中可以有多个数据
- 通过this.state.xxx来获取状态（对应vue的this.xxxx）
- state数据值只能通过this.setState()来修改（与vue不同）
- Do not mutate state directly. Use setState()
- state可以定义在类的构造方法中也可以写在类的成员属性中
第一种设置方式
import React, { Component } from "react";
class App extends Component {
// 构造函数初始state
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
render() {
return <div>{this.state.count}</div>;
}
}
export default App;第二种设置方式（推荐）
import React, { Component } from "react";
class App extends Component {
// 常规初始化
state = {
count: 0,
};
render() {
return <div>{this.state.count}</div>;
}
}
export default App;切记：不要直接通过
this.state.xxx = xxxx形式去更改state的值。否则会包警告，警告如下：Do not mutate state directly. Use setState()。
2、修改状态
在vue中，data属性是利用Object.defineProperty处理过的，更改data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setState。
setState接受2个参数，第一个参数负责对state自身进行修改（必须的），我们称之为updater；第二个参数是一个回调函数（可选），因为setState方法是异步的，如果想在更新好状态后做进一步处理，此时就可以用到第二个参数了。
语法：this.setState(updater[,callback])
updater参数传递的时候支持两种形式：对象形式与==函数形式==
对象形式
this.setState({
count: this.state.count + 1
})函数形式
this.setState(state => {
return {
count: state.count + 1
}
})上述两种参数形式的updater建议使用函数形式。因为对象形式在批量使用的时候会存在问题，因此建议使用函数形式。
React中的setState执行机制
一、是什么
一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state
当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用
如下例子：
import React, { Component } from 'react'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
message: "Hello World"
}
}
render() {
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={e => this.changeText()}>面试官系列</button>
</div>
)
}
changeText() {
this.setState({
message: "JS每日一题"
})
}
}通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新
如果直接修改state的状态，如下：
changeText() {
this.state.message = "你好啊,青山";
}我们会发现页面并不会有任何反应，但是state的状态是已经发生了改变
这是因为React并不像vue2中调用Object.defineProperty数据响应式或者Vue3调用Proxy监听数据的变化
必须通过setState方法来告知react组件state已经发生了改变
关于state方法的定义是从React.Component中继承，定义的源码如下：
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};从上面可以看到setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据
二、更新类型
在使用setState更新数据的时候，setState的更新类型分成：
- 异步更新
- 同步更新
异步更新
先举出一个例子：
changeText() {
this.setState({
message: "你好啊"
})
console.log(this.state.message); // Hello World
}从上面可以看到，最终打印结果为Hello world，并不能在执行完setState之后立马拿到最新的state的结果
如果想要立刻获取更新后的值，在第二个参数的回调中更新后会执行
changeText() {
this.setState({
message: "你好啊"
}, () => {
console.log(this.state.message); // 你好啊
});
}同步更新
同样先给出一个在setTimeout中更新的例子：
changeText() {
setTimeout(() => {
this.setState({
message: "你好啊
});
console.log(this.state.message); // 你好啊
}, 0);
}上面的例子中，可以看到更新是同步
再来举一个原生DOM事件的例子：
componentDidMount() {
const btnEl = document.getElementById("btn");
btnEl.addEventListener('click', () => {
this.setState({
message: "你好啊,李银河"
});
console.log(this.state.message); // 你好啊,李银河
})
}小结
- 在组件生命周期或React合成事件中，setState是异步
- 在setTimeout或者原生dom事件中，setState是同步
三、批量更新
同样先给出一个例子：
handleClick = () => {
this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1
this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1
this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1
}点击按钮触发事件，打印的都是 1，页面显示 count 的值为 2
对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果
上述的例子，实际等价于如下：
Object.assign(
previousState,
{index: state.count+ 1},
{index: state.count+ 1},
...
)由于后面的数据会覆盖前面的更改，所以最终只加了一次
如果是下一个state依赖前一个state的话，推荐给setState一个参数传入一个function，如下：
onClick = () => {
this.setState((prevState, props) => {
return {count: prevState.count + 1};
});
this.setState((prevState, props) => {
return {count: prevState.count + 1};
});
}而在setTimeout或者原生dom事件中，由于是同步的操作，所以并不会进行覆盖现象
小结
Q1：state与props有什么区别？
a. state是组件自身数据的管理对象而props是别的组件传递来的数据的管理对象；
b. state是可以修改的，而props是不能修改的；
c. state只能在类组件中使用，而props既可以在类组件中使用也可以在函数组件中使用；
Q2：this.setState()是同步的还是异步的？
该方法既有同步实现也有异步实现。如果代码进入了react代码流程，则是异步的（居多），否则（原生js，典型的有定时器）是同步的。
