如何定义state

在类组件中，在constructor()中使用this.state={}来定义

class A extends Component {    constructor (props) {     super(props)  // 调用Component的构造函数     // 定义state     this.state = {       num: 1     }   } }

在函数组件中，自React(16.8)版本以后，使用useState()来定义。

function B (props) {   // 定义state声明式变量   let [num, setNum] = useState(1) }

如何使用state

在类组件中，使用this.state访问声明式变量。
在函数组件中，直接访问useState的结果。

如何修改state声明式变量

在类组件中，使用this.setState()方法来修改。

class A extends Component {    constructor (props) {     super(props)  // 调用Component的构造函数     // 定义state     this.state = {       num: 1     }   }      this.setState(state=>({num: state.num + 1}), ()=>                 {console.log( this.state.num)})   } }

在函数组件中，使用useState()返回值的第二个参数（set*）方法来修改。

function B (props) {   // 定义state声明式变量   let [num, setNum] = useState(1)    const add = () => {     console.log('1--- num', num)     // 如果这里是React(V17)中，在合成事件中是异步的，如果在宏任务或        Promise.then()是同步的。     // 如果这里是React(18)，无论在哪里都是异步的。     // useState()给的这种set*方法，是没有callback的。     // setNum(num + 1)     setNum(num => num + 10)     console.log('2--- num', num)   }   }

this.setStaate()的两种写法

this.setState({},callback)当我们修改state时，如果旧值与新值无关，建议使用这种写法。
this.setState((state)=>{},callback)当我们修改state时，如果旧值与新值有关，建议使用这种写法。

this.setState()的异步性

在React(v17/v16)中，this.setState()在合成事件（事件，生命周期中）是异步的；在宏任务、promise.then()中是同步的。
在React(v18)中，无论this.setState()在哪里都是异步的，这种特性，被称之为“并发模式”。
this.setState()定为异步是为了性能优化。

this.setState()自动合并

在同一个函数域中，多个this.setState()会自动合并，以减少没必要的diff运算(协调运算)；自动合并的规则是一种浅合并。

便宜好用的国外VPS推荐