javascript - react 中组件之间通信的正确方式是什么？为什么不到处使用 refs 呢？

Question

我知道这个问题被问过很多次，但到目前为止我找不到一个合理的答案。

如果我想制作一个应用程序，它有两个组件:按钮和一个显示时间的计时器。单击按钮时，计时器开始/暂停/重置。对于我这个 React 初学者来说，最明显的做法是在计时器内创建 start() pause() reset() 方法，然后单击按钮调用此函数(使用 refs)。

但是根据 React 文档和所有教程，应该避免这种情况。应该将 start() pause() reset() 方法保留在最顶层组件(“按钮”和“计时器”组件的父级)中，并从那里控制计时器。

但是如果我想要 10 个不同的计时器(相同的组件不同的设计)怎么办？在计时器内部定义启动、暂停、重置方法，所以顶级组件没有 30 个方法，这不是 DRY 编码吗？

这是一个 hipotetical 示例，请不要给我解决方法，我想了解将所有逻辑都放在顶级组件中的原因，使子组件不可作为独立重用。

Answer 1

在我看来，你不必在任何顶级组件中使用定时器方法，定时器必须只知道按钮已被单击，在这种情况下，你可以通过 Prop 将点击事件传递给定时器，即假设定时器和按钮在同一个函数中呈现。这意味着也没有裁判。当计时器组件收到新的 Prop 时，它将重新渲染。

这同样适用于计时器组件内的多个计时器。