对于 React 组件而言,数据分为两种:
React 的数据是自顶向下单向流动的,这两者有什么区别呢?
Props
React 的核心思想就是组件化思想,组件可以将 UI 切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。
组件从概念上看就是一个函数,它可以接收任意的输入值(称之为”props”),并返回一个需要在页面上展示的 React 元素。所以可以把 props 理解为从外部传入组件内部的数据。由于 React 是单向数据流,所以 props 基本上也就是从服父级组件向子组件传递的数据。
只读性
无论是使用函数或是类来声明一个组件,它决不能修改它自己的 props。如果 props 在渲染过程中可以被改变,会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的 props 传入组件中。所有的 React 组件必须像纯函数那样使用它们的 props。
默认参数
defaultProps 可以被定义为在组件类本身上的一个属性,为该类设置默认属性。这对于未定义(undefined)的属性来说有用,而对于设为空(null)的属性并没用。
state
state 是什么呢?
State is similar to props, but it is private and fully controlled by the component.
一个组件的显示形态可以由内部状态和外部参数所决定,props 是组件外传递进来的数据,state 代表的就是 React 组件的内部状态。
组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类,组件可以选择将其状态作为属性传递给其子组件。
setState
state 不同于 props 的一点是,state 是可以被改变的,setState 函数来修改组件 state,而且可以引发组件重新渲染。
- 不要直接更新状态,不可以直接通过
this.state=XX
的方式来修改,应当使用 setState()。
- 状态更新可能是异步的,你不应该依靠它们的值来计算下一个状态。
- 状态更新合并,React 可以将多个 setState() 调用合并成一个调用来提高性能。
总结
props 是外部传给组件的数据,而 state 是组件内部自己维护的数据,对外部是不可见的。
所以,判断一个数据应该放在哪里,用下面的原则:
- 如果数据由外部传入,放在 props 中。
- 如果是组件内部状态,是否这个状态更改应该立刻引发一次组件重新渲染?如果是,放在 state 中。不是,放在成员变量中。
- 没有 state 的叫做无状态组件,有 state 的叫做有状态组件。
- 多用 props,少用 state。也就是多写无状态组件。