react中state和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//类型检查 必传参数
}
  • 可以存在有或者无状态组件中,我们应该尽可能降低代码耦合度,划分有状态和无状态组件,有利于维护。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值