React中props和state的区别

对于 React 组件而言，数据分为两种：

• props
• state

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。也就是多写无状态组件。