react-属性和状态

loading 2022年12月03日 67次浏览

相似点:
都是js对象,都会触发render更新。

不同点:

  1. 属性能从父组件获取,由父组件修改,状态不能
  2. 属性能在内部设置默认值,状态也可以,设置方式不一样
  3. 属性不在组件内部修改,状态要在组件内部修改
  4. 属性能设置子组件初始值,状态不可以
  5. 属性可以修改子组件的值,状态不可以

state的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 state是一个局部的、只能被组件自身控制的数据源。state中状态可以通过this.setState方法进行更新,setState会导致组件的重新渲染。

props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的props,否则组件的props永远保持不变。

没有stat 的组件叫无状态组件(stateless component),设置了state的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。