React组件的数据存储

Question

我正在考虑创建一个接收项列表的列表组件，然后返回<li></li>列表。此外，列表可以通过ajax调用动态附加。

我想问一下，在这种情况下，我应该在哪里存储数据，道具或状态？

Answer 1

在大多数情况下： 将状态用于随时间变化的数据。

执行此操作的常用方法是使用两个组件List和ListItem。 List组件应该处理状态，ajax调用以及将列表内容作为道具传递给子组件ListItem。

<List>
    <ListItem>
    <ListItem>
    <ListItem>
    ...
</List>

因此List将数据存储为状态。 ListItem是无状态的，只是从List接收数据。

  

React docs:哪些组件应该具有哪些状态？

     

您的大多数组件应该只从props中获取一些数据并进行渲染。但是，有时您需要响应用户输入，服务器请求或时间的推移。为此你使用状态。

     

尽量保持尽可能多的组件无状态。通过这样做，您可以将状态隔离到最合理的位置并最大限度地减少冗余，从而更容易推断您的应用程序。

     

一种常见的模式是创建几个只呈现数据的无状态组件，并在层次结构中有一个有状态的组件，通过props将其状态传递给子节点。有状态组件封装了所有交互逻辑，而无状态组件负责以声明方式呈现数据。

这可能有助于理解构建反应应用的结构：Tutorial: Thinking in React