React State 状态
和 Vue 的思想不同，在 React 中的变量并不是所有的都是在实时变化中的，所以需要状态 State 去维护需要刷新和变化的变量，当需要更新组件中的某个变量值的时候，需要更新组件的 state —— 当然这个变量也需要在 state 中，这样更新了 state 后， React 会根据新的 state 重新渲染页面。
状态 State
而 state 也是 React.Component 这个类中的成员变量，具体的定义可以参考 React 的源代码：
state: Readonly<S>;需要更新的变量只要声明在构造函数的 state 中就可以通过 state 控制这些变量的更新：
class Hello extends React.Component {
constructor() {
super()
this.state = {
clickText: ""
}
}
render() {
return (
<div>
<h1>hello world</h1>
<p>{this.state.clickText}</p>
</div>
)
}
}接下来可以加一个按钮，当按钮点击的时候，显示出 click 的字样。这个时候，就需要对state进行操作，更新 state 操作使用 Component 这个父类的 setState 方法，这个方法是这样声明的
setState<K extends keyof S>(
state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
callback?: () => void
): void;所以可以当触发点击事件的时候，调用这个函数，是 state 发生变化，这样就能看到对应的地方先输出发生变化后的内容了。
class Hello extends React.Component {
constructor() {
super()
this.state = {
clickText: ""
}
}
render() {
return (
<div>
<h1>hello world</h1>
<p>{this.state.clickText}</p>
<button
onClick={()=> {
this.setState({
clickText: "this is click"
})
}}
>click</button>
</div>
)
}
}状态更新
当点击按钮的时候，会触发 setState 函数，将 state 中的 clickText 的内容赋值为 "this is click" ，然后 React 会因为 state 发生了更新，重新渲染页面，将新的值展示出来。 可以做一个对比，如果这个变量不是 state 的且不使用 setState 方法，React 会重新渲染页面吗？
class Hello extends React.Component {
constructor() {
super()
}
outClickText = ""
render() {
return (
<div>
<h1>hello world</h1>
<p>{this.state.clickText}</p>
<button
onClick={()=> {
this.outClickText = "this is click"
console.log(this.outClickText)
}}
>click</button>
</div>
)
}
}通过点击按钮，可以看到控制台输出的变量的值是 "this is click" ， 但是页面的显示的值并没有变化，这说明，如果该变量不是 state 中的，更新了，React 是不会重新渲染页面的。同样的，如果是 state 中的元素，只是单纯的赋值，没有使用 setState 方法更新，React 也不会更新状态，是不会进行渲染的。
class Hello extends React.Component {
constructor() {
super()
this.state = {
clickText: ""
}
}
render() {
return (
<div>
<h1>hello world</h1>
<p>{this.state.clickText}</p>
<button
onClick={()=> {
this.state.clickText = "this is click"
console.log(this.state.clickText)
}}
>click</button>
</div>
)
}
}这个时候，点击按钮，在控制台中可以看出，变量已经被赋值为 "this is click" ，但是因为没有使用 setState 更新，所以 React 并不会认为这是状态更新，也不会重新渲染页面，所以页面上还是没有出现新的变化。