React-state组件状态

state介绍

state是组件中最重要的一个属性，他就是用来存储组件中的响应式数据（相当于vue中的data）

注意：在函数组件（也叫无状态组件）默认是不能使用state的，但是在react16.8版本中新增的HOOK中的useState()可以为函数组件创建state状态。

读取状态

this.state.属性名（类组件）--------state.属性名（函数组件）

修改状态

在React中修改state中的数据需要用useState（）方法修改。
useState（）是一个异步的修改过程。在调用之后会触发render渲染函数，等到render函数执行结束之后，页面上的数据才会发生改变。

useState（）的两个参数：
第一个参数就是修改状态，第二个参数是修改数据后等待视图更新完成时的一个回调函数，在该回调函数中可以操作重新渲染后的dom元素。

语法

类组件

 class Fun extends React.Component{
        // 创建state
            state={
                bool:true
            }
        fun=()=>{
            // 修改需要使用setState
            this.setState({
                bool:!this.state.bool
            })
        }
        render(){
            return (
                <div>
                    <h1 onClick={this.fun}>我是一个类组件--{this.state.bool?"类组件1":"类组件2"}</h1>    
                </div>
            )
        }
       }

函数组件

let Funcom=()=>{
    // 使用useState()c创建函数组件的状态
    let [mystate,setmystate]=useState("函数组件创建state!!!")
    let fun=()=>{
        //使用setmystate来修改mystate中的数据
        setmystate(mystate="修改数据");
    }
    return (
        <div>
            {/* 读取 */}
            <h1>我是一个函数组件--{mystate}</h1>
            <button onClick={fun}>点我修改state</button>
        </div>
    )
}