React Props 和 State 的区别

React Props 和 State 的区别

setState 有什么作用？
setState() 计划更新组件的状态对象。当状态改变时，组件通过重新渲染来响应。

state 和 props 有什么区别？
它们在一个重要方面有所不同：props 传递给组件（类似于函数参数），而状态在组件内管理（类似于函数中声明的变量）。

在区分 props 和 state 之前，让我们也确定它们相似的地方。
props 和 state 都是普通的 JS 对象
props 和 state 的变化都会触发渲染更新
props 和 state 都是确定性的。如果您的组件为相同的 props 和 state 组合生成不同的输出，那么就说明代码写的有问题

放进state还是props？
如果一个组件需要在某个时间点改变它的一个属性，该属性应该是其state的一部分，否则它应该只是该组件的一个props。
props
props（properties 的缩写）是一个组件的配置，如果可以的话，它的选项。就接收它们的组件而言，它们是从上面接收的并且是不可变的。
一个组件不能改变它的 props，但它负责把它的子组件的 props 放在一起。
state
当组件挂载时状态以默认值开始，然后及时发生突变（主要由用户事件生成）。它是一个时间点的可序列化表示——快照。

一个组件在内部管理它自己的状态，但是——除了设置一个初始状态之外——没有必要处理它的孩子的状态。你可以说state是私有的。
我们没有说 props 也是可序列化的，因为通过 props 传递回调函数是很常见的。（有点困惑）

组件类型
无状态组件——只有props，没有state。除了 render() 函数之外，没有太多的事情发生，它们的所有逻辑都围绕着它们接收到的 props 展开。这使得它们很容易遵循（并测试）。我们有时称这些为愚蠢的组件（事实证明这是在英语中滥用 F-word 的唯一方法）。
有状态组件——props和state。我们也称这些状态管理器。它们负责客户端-服务器通信（XHR、Web 套接字等）、处理数据和响应用户事件。这些类型的逻辑应该封装在适度数量的有状态组件中，而所有可视化和格式化逻辑应该向下游移动到尽可能多的无状态组件中。