在React中掌握组件层次结构

时间:2016-01-06 22:24:28

标签: javascript reactjs structure components hierarchy

我正在学习反应和思考组件的结构。以下让我感到困惑。

  • 我们被告知应该有一个单一的事实来源。

  • 所有者组件应将props / states传递给其职责(如某些人称之为'ownee')组件。

因此,如果我自己的整个应用程序是一个有很多责任(ownee)组件的大组件(所有者),那是否意味着该顶级所有者组件将保留所有的道具和状态。那将是一个巨大的目标。

由于我最初没有使用@current_user = User.first ,因此states的所有更改都必须传递给“所有者”&那个组件再次渲染?

显然这不对,对吧?任何指导都将非常感谢。

1 个答案:

答案 0 :(得分:1)

这种解释稍微偏离了标记。您的顶级组件并不需要是一个全知的无所不知的庞然大物,仅仅是因为 props state 之间的关键区别。任何组件都可以自由选择和控制它自己的状态,它可以传递给它的孩子。但是,组件的道具不应理想地保留在其状态变量中,因为这是导致重复的原因并且违反了单一的真值范式。道具不属于该组件,它由发送道具的祖先所拥有。相反,对于一个组件来说,将其状态作为道具传递给它的孩子是很自然的。

除非您的应用主要显示静态内容,否则您将看到在没有状态的情况下您无法做多少事情。因此,当您开始处理状态时,请将状态保持在它所属的位置。即使使用Flux,也有办法使状态与其所属的组件保持相关。