React--state的正确设计

学习资源推荐

state的正确设计

原则

组件的任何UI改变都可以从state的变化中反映出来

无多余状态

普通属性

（1） 该属性来源通过props从父组件中获取
（2） 该属性在组件的整个生命周期中都保持不变
（3） 该属性可以通过其他状态（state） 或者（props）计算得到
（4） 该属性未曾在组件的render方法中使用

异步更新

• setState（）与props的更新都是异步

• 出于性能考虑，setState存在状态合并，执行时机由react决定

  this.state={
      color:"red"
  }
  //red->blue->red 状态合并后相当于状态前后未发生变化，组件不更新
  this.state={
      color:"red"，
      title:"react"
  }
  this.setState({title:"vue"})
  //状态合并,不会直接替换
  this.state={
      color:"red"，
      title:"vue"
  }
  

  ​

不可变对象的状态改变

基本类型

this.setState({
    count: 1,//number
    title: 'React',//string
    flag: true//boolean
})

引用类型–数组

• 增加-concat/[…arr,item]
• 删除-slice/非splice
• 过滤filter

引用类型–对象

• Object.assign(target,source1,source2)

this.state={
    user:{age:18}
}
this.setState({
    user:Object.assign({},this.state.user,{age:20})
})

• {…obj,prop:newProp}

this.state={
    user:{age:18}
}
this.setState({
    user:{...this.state.user,age:20}
})

不可变对象的好处

• 每次修改返回新对象，原有对象不会因为错误修改而出错，方便程序的管理和调试
• 不可变对象只需比较引用就可以判断状态是否真的改变， 从而避免不必要的render调用，提高性能