javascript - React 通过 props 传递数据 vs 方法调用

Question

假设我有一个组件 X，它呈现一个文本输入字段 + 一个子组件 Y。Y 使用输入字段中的文本来呈现其他内容。

为了获取数据，X 监听来自文本字段的更改事件，然后通过引用获取其更新的内容。

现在据我了解，我可以通过两种方式将数据传递给子 Y。

1) X 将新数据存储在其状态中，因此会触发其渲染方法，这里我使用像 <Y something={data}/> 这样的 Prop 将数据传递给 Y

2) X 通过使用像 this.refs.y.setSomething(data) 这样的 ref 来调用 Y 上的方法。在这种情况下，我不需要将数据存储在 X 的状态中。

那么除了在 X 中存储状态之外，选择其中之一的原因还有哪些？

Answer 1

您应该使用 props 将数据传递到子组件中，如 documentation 中所示。您可以将 props 视为子组件的函数参数。

除了在 React 中执行此操作的惯用方式之外，我还可以想到您应该这样做的几个原因。首先，调用this.refs.y.setSomething(data)这样的方法意味着您需要实现将状态存储在 Y 中的代码。因此您不必在 X 中设置状态，而是在 Y 中进行设置。

更重要的是，如果 X 由于某种原因在重新渲染期间卸载 Y，然后重新安装它，您将丢失 Y 中的状态。但是如果您传递 props，那么 Y 将在之前和之后收到相同的 props卸载后。