react学习笔记之三--State

State概述

state可以理解成vue中的data，没学过vue也不要紧，就相当于设置一个页面的全局变量，设置的同时也要设置setter，这样就能实现更新state并重新渲染组件，定义的规则如下：

const [index, setIndex] = useState(0);

这里的index是变量名，setIndex是inedx的set函数，用来进行赋值（只能用这个函数进行赋值，不能使用=来赋值。），最后的0是初始值。

组件之间的state不共享

就算是父组件调用两次组件，每次的state都是分离的

setState的用法

setState在宏任务（setTimeout，原生dom事件等）中是同步的，其他（react生命周期，react事件）都是异步。
如果你需要让state强制同步，可以使用flushSync，以下是使用样例：

import { flushSync } from 'react-dom';
flushSync(() => {
  this.setState({ message: "111" })
})
// 这里获取就是同步的
console.log(this.state.message) // 111

注意

当你使用setState({})时，视图会刷新；当你setState(null)时，视图不会刷新。

state原理

setState和vue的setter差不多还有小程序里的setData，只要里面的数据发生了更改，就会导致页面重新渲染，但是它和vue还是稍有区别的，如果state里的是一个对象，那么对象里面的属性变化就难以监测，因为对象是引用类型，保存的是地址，地址不会发生改变，你想要刷新就要强制改变地址，比如用一个别的变量去存储，如下代码所示：

var temp = obj
setObj(temp)