5 React 状态state 定义与更新 和属性的区别 同步异步 状态提升

React 状态state 定义与更新 和属性的区别 同步异步 状态提升

关于state

状态state是一个局部的、只能被组件自身控制的数据源
state只能在组件内部被初始化，外部不能访问也不能修改
state可以通过this.setState进行更新，setState会导致组件的重新渲染，setState默认异步

状态定义的两种方式

1. 构造函数里通过this.state定义(官方推荐)
2. 类里面通过state定义

import React, { Component } from 'react';

export default class State extends Component {
    constructor(){
        super();
        //状态定义1 通过构造 
        this.state={
            name:"test state"
        }
    }

    //状态定义2
    state={
        name:"test state sec"
    }

    render() {
        return (
            <div>
                {this.state.name}
            </div>
        );
    }
}

状态的更新 同步与异步

状态的更新只能通过setState来操作，直接赋值如this.state.name = "aaa" 是无效的
setState是默认异步的，但是setState有第二个函数形参，在这里面可以同步获取更新的状态值

import React, { Component } from 'react';

export default class State extends Component {
    constructor(){
        super();
        this.state={
            name:"test state"
        }
    }

    componentDidMount(){
        this.setState({
            name:"haha"
        })
        console.log(this.state.name);//test state 说明是异步的

        //setState函数的第二个参数可以同步获取更新的state值，达到同步的效果
        this.setState({
            name:"make it synchronize"
        },()=>{
            console.log(this.state.name);//make it synchronize 说明是同步的
        })
    }

    render() {
        return (
            <div>
                {this.state.name}
            </div>
        );
    }
}

状态和属性的区别

1. 从来源上来看，状态是组件内部创建并维持的，属性虽然也可以在组件内创建，但一般是从父组件传递过来。
2. 属性可以由父组件修改，状态不能
3. 父组件能设置子组件的属性初始值，状态不行
4. 状态只能在组件内部更新，属性除非外部组件主动传来新的props否则永远保持不变

状态提升

如果由多个组件共享一个数据，可以把这个数据放到共同的父级组件来管理

无状态组件

顾名思义，没有state的组件叫做无状态组件，比如函数式组件