如何使用React

时间:2017-02-09 00:18:34

标签: reactjs

使用React,我很好奇使用和操作模式,应用程序背景,应用程序轮换等的目标方法是什么,这些方法不在子组件内部。

你应该如何"循环"围绕并向顶级组件(app)发送消息?

我们是否应该通过所有层传递回调' props

由于

2 个答案:

答案 0 :(得分:2)

是的,这称为逆数据流。国家向下流动层次结构,事件在层次结构中冒出来。

Thinking in React

  

由于组件只应更新自己的状态,   父组件将回调传递给将触发的子组件   每当国家应该更新。

     

属性中父组件传递的回调将调用setState(),   并且应用程序将会更新。

     

虽然这听起来很复杂,但实际上只是几行代码。和   它非常清楚您的数据在整个应用中的流动情况。

Lifting state up

  

应该有一个真实的来源"对于任何变化的数据   在React应用程序中。通常,状态首先被添加到   需要它进行渲染的组件。然后,如果其他组件也   需要它,你可以将它提升到他们最亲近的共同祖先。代替   尝试在不同组件之间同步状态,你应该   依靠自上而下的数据流。

您是否必须跨多个组​​件管理状态?

如果是这样,那么有很好的状态管理库,如ReduxMobX。对于许多实际应用,这些库及其React绑定是管理与许多组件相关的状态的不错选择!

您可以在需要时使用这些库来解决事情发生变化的情况。

答案 1 :(得分:1)

当我开始使用React时,我想知道完全一样。

允许打开/关闭调用模式,应用程序背景,应用程序轮换以及您想要跟踪UI状态的类似内容。

在组件层次结构的复杂部分中传递回调以管理用户界面的状态的方式。

存在为React UI组件提供数据层的工具。此数据层独立于组件层次结构,允许您控制UI的每个部分(组件)所需的任何状态。我们的想法是拥有一个商店(包含与任何状态相对应的变量的文件),您可以从组件内部导入,并保存您需要跟踪的状态更改(读取变量)。然后,您可以使用这些状态变量在组件内做出您可能需要的任何决定,或根据需要传输数据。

-

你有Redux和MobX。最新提供的功能基本相同,但具有更温和的学习曲线。主要使用它更简单,因为它不需要您在每次更改时指定一个完整的新状态(重新定义您正在跟踪的所有变量而不是更改的变量)。因此,它更简洁,在我看来,直截了当。

我建议您首先学习Redux,以了解数据层概念及其工作原理。我已经看到过Redux声明如何在状态非常复杂的应用程序中发挥作用。我个人从未感到需要。所以基本上去Redux如果你不介意处理额外的输入和复杂性以获得完全控制。对于实际应用,MobX使事情变得更简单,更快速,更直接的开发。

-

有一些方法可以在没有数据层的情况下在组件层次结构中上下移动状态数据,但是在使用React设计更复杂的应用程序/ UI时,将其变为绝对必要。

祝你好运。