前端基础之《React（11）—state声明式》

一、如何定义state

1、在类组件中，在constructor()构造函数中使用this.state={}来定义

2、在函数式组件中，自React16.8以后，可以使用useState()来定义

二、如何使用state

1、在类组件中，通过this.state来访问声明式变量

import { Component } from 'react';

class A extends Component {

    constructor(props) {
        super(props); // 调用父类的构造函数

        // 定义state
        this.state = {
            num: 1,
        };
    }
    
    // 类组件一定要有render方法，因为render返回值就是组件的DOM结构
    render() {

        // 建议在类组件中解构state
        const { num } = this.state;
        
        return (
            <div>
                <h1>类组件</h1>
                <h1>{ num }</h1>
            </div>
        );
    }
}

export default A;

2、在函数式组件中，直接访问useState的结果

三、如何正确地修改state声明式变量

1、在类组件中，使用专属方法this.setState()来修改

2、在函数式组件中，使用useState()返回值的第二个参数来修改

3、this.setState两种写法

（1）this.setState({})，对象语法

（2）this.setState((state,props)=>{}) ，回调函数语法

（3）例子

    // 自定义方法
    add () {
        // 这种写法是没问题的，但不够优雅。因为你要修改的state新值是由旧值计算而来的
        // 所以建议使用函数式写法，this.setState((state,props)=>{})
        // 用旧值state参与运算，得到新值
        this.setState({
            num: this.state.num + 1, 
        });
    }

4、this.setState是异步的，所以有第二个参数callback，表示声明式变量修改已完成

this.setState({}, callback)

this.setState((state,props)=>({}, callback))