Reactjs——数据流

Question

我有一个关于在 Reactjs 中加载数据的一般性问题。

主要组件叫做App。然后是 App returns 3 个组件：Header、Body 和 Footer。现在在 Body 中，有一个 Tab 组件，它进一步细分为几个组件，包括一个名为 "grids".

的组件

现在我希望我的数据（过滤后）显示在网格中。

如果我做错了请指正，但我的想法是：

在主组件App中加载数据作为状态：
通过以下方式将其传递给正文：
```
<Body data={this.state.data} />
```
在 Body 组件中，将其进一步传递为：
```
<Tabs data={this.props.data} />
```
在 Tabs 组件中，将其进一步传递为：
```
<Grids data={this.props.data} />
```
在网格中，编写所有过滤数据的方法，并display/return相应地进行过滤。

这是正确的吗？

谢谢

Answer 1

您概述的流程是正确的。另一种方法是使用 context：在一个组件的上下文中设置的任何内容都可用于该组件的每个后代，而无需设置中间组件的道具。

Context comes with a warning though:

Using context will make your code harder to understand because it makes the data flow less clear. It is similar to using global variables to pass state through your application.

顺便说一句，为了管理数据，我会使用 Flux 或 Redux 之类的东西。随着应用程序的增长，直接在 React 组件中管理数据很快就会成为一个难题。 Flux/Redux，另一方面，扩展性非常好。

Reactjs——数据流

Reactjs - data flow

state

reactjs