讲讲React中的State和Props

基本概念

• 在React中，组件的数据存储在props和state中。
• 一个组件的显示形态可以由数据状态和外部参数所决定。

外部参数——props

• 组件从概念上可以理解为一个函数，因为函数也是封装一个独立可复用的功能，而props就可以理解为函数接收的参数。
• props为从外部传入组件内部的数据。
• 特性
  • 只读性
  • 不变性
  • 在子组件中，props在内部不可变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变

数据状态——state

• 在组件初始化时，会根据constructor()中this.state定义的状态值来初始化组件。
• 不用与props的只读性，可以通过this.setState()来变更state的值，触发重新渲染。
• state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它可以理解为组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

props和state的相同点及区别

• 相同点
  • props 和 state 都能触发渲染更新
• 区别
  • props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
  • props 在组件内部是不可修改的，但 state 在组件内部可以进行修改