React中的状态和道具有什么区别？

Question

React中的状态和道具有什么区别？我正在观看关于React的Pluralsight课程，导师说道具不应该改变。我现在正在阅读一篇关于道具与状态的文章（uberVU / react-guide），它说道具和状态更改都会触发渲染更新。在文章的后面它说：道具（属性的简称）是组件的配置，如果可以的话，它的选项。他们是从上面收到的，不可改变的。道具可以改变，但它们应该是不可改变的？什么时候应该使用道具？什么时候应该使用状态？如果你有React组件需要的数据，它应该通过道具或React组件中的设置通过getInitialState吗？

Answer 1

我最喜欢的道具vs状态总结就在这里：react-guide大帽子提示给那些家伙。以下是该页面的编辑版本：

---

道具与国家

tl; dr如果Component需要在某个时间点改变其中一个属性，那么该属性应该是其状态的一部分，否则它应该只是该Component的prop。

---

道具

道具（属性的简称）是Component的配置。它们是从上面接收的，并且就接收它们的组件而言是不可变的。组件不能更改其道具，但它负责将其子组件的道具放在一起。道具不必只是数据 - 回调函数可以作为道具传递。

州

状态是一个数据结构，在组件安装时以默认值开始。它可能会随着时间的推移而发生变化，主要是由于用户事件。

组件在内部管理自己的状态。除了设置一个初始状态，它没有摆弄其子女的状态。您可以将状态概念化为该组件的私有状态。

改变道具和状态

                                                   道具状态
    可以从父组件获取初始值吗？是的是的
    父组件可以更改吗？是的
    可以在Component中设置默认值吗？*是是
    组件内部可以更改吗？不是的
    可以为子组件设置初始值吗？是的是的
    可以改变子组件吗？是的

• 请注意，从父级接收的props和state初始值都会覆盖Component中定义的默认值。

这个组件应该有状态吗？

国家是可选的。由于状态增加了复杂性并降低了可预测性，因此优选没有状态的组件。即使你在交互式应用程序中显然不能没有状态，你应该避免使用太多有状态组件。

组件类型

无状态组件只有道具，没有状态。除了render（）函数之外没有太多事情发生。他们的逻辑围绕着他们收到的道具。这使得它们非常易于遵循和测试。

有状态组件既有道具又有状态。当组件必须保留某些状态时，将使用这些。这是客户端 - 服务器通信（XHR，Web套接字等），处理数据和响应用户事件的好地方。这些物流应该封装在适量的有状态组件中，而所有可视化和格式化逻辑应该向下游移动到许多无状态组件中。