盒子
盒子
文章目录
  1. 前言
  2. 共同点
  3. 什么时候用props 或 state
    1. props
    2. state
    3. props和state的改变
  4. 一个组件应该有state
    1. 组件类型 component types

React props vs state

前言

最近学习React,发现props和state好像有很多相似之处,但又分不清差别。以此篇文章做个记录。

共同点

  • 都是 plain JS Object
  • props和state的变化都会触发render update
  • 都是确定性的。如果你的component对于相同格式的props和state有不同的结果,说明你在某一步出现了错误。

什么时候用props 或 state

如果需要在某个时刻修改这个属性,那么这个属性应该是属于 state,否则就放在 props

props

其实是component的配置,由上一层component 传递而来,是不可变(immutable)的。
一个组件不能改变自身的props,但是可以设置子组件的props

state

在component加载时,state会初始化。一般而言,state的变化是由用户的操作触发。它相当于是某一个时间点的序列化的展示,一个快照。
可以把state当成一个私有属性。一个组件只能管理自身的state。除了设置初始值,组件是不能设置子组件的state

props和state的改变

*props state
Can get initial value from parent Component? Yes Yes
Can be changed by parent Component? Yes No
Can set default values inside Component?* Yes Yes
Can change inside Component? No Yes
Can set initial value for child Components? Yes Yes
Can change in child Components? Yes No

⚠️ 无论是props还是state,由父组件传递而来的初始值会覆盖组件自身定义的默认值。

一个组件应该有state

state是可选的。因为state会增加复杂性,降低可预测性,如果没有state是再完美不过了~尽管我们都清楚state在交互程序中必不可少,但是也应该避免使用太多的 Stateful Components

组件类型 component types

  • Stateless component (无状态组件)
    • 只有props,没有state
    • render()方法中没有太多东西,所有的逻辑可以通过接收的props处理。
    • 容易追踪,也容易测试
  • Stateful component (有状态组件)
    • 既有props也有state。通常称为状态管理者(state managers)
    • 负责客户端-服务端的交互(XHR, web socket),处理数据以及响应用户的事件。
    • 复杂的逻辑封装要适度封装到Stateful Components,而视觉化和格式化的逻辑应该尽可能往下移到无状态组件(Stateless component)。

资料来源:react-guide/props-vs-state.md at master · uberVU/react-guide · GitHub

支持一下
扫一扫,支持小王子