react中state和props的区别_react state store props-优快云博客

本文介绍了React中组件的状态(state)和属性(props)。状态主要用于存储组件内部数据，通过setState异步更新，并可通过回调确保获取最新值。props作为父子组件间通信的桥梁，是只读的，更新props需通过父组件。同时讲解了如何设置组件的默认props和类型检查。提倡减少有状态组件，提高代码可维护性。

state

用来存储组件内部的数据状态
需要通过setState进行修改，而setState是异步的，需要立即获取最新的状态时使用第二个参数（回调函数），代表更新state完成。如果懒得每一次都是用回调函数，也可以使用promise+async+await进行封装，用同步的思想写异步操作。

this.setState({age:12},()=>{console.log(this.state.age);//=>12})

只能在构造器constructor中进行初始化
只存在于有状态组件中

props

父子组件沟通的一个桥梁
子组件不能修改它(只读性)，想要更新props，需要通过父组件更新，或者在子组件设置state，接收props，使用setState间接更新，否则页面会无效。（根本原因react数据流自顶向下、单向数据流）
props是一个对象，可以接收函数、键值、嵌套组件等
可以使用this.props.key获取值，也可以使用es6进行解构

let {age,name}=this.props;

可设置默认参数值,如果父组件未定义参数值，但传递了参数名称，默认值为true，同时也可以对传递过来的参数进行类型检查

ComponentName.defaultProps = {
    name:18,
     title: propsTypes.string.isRequired//类型检查 必传参数
}

可以存在有或者无状态组件中，我们应该尽可能降低代码耦合度，划分有状态和无状态组件，有利于维护。