通过道具与方法调用反应传递数据
React passing data via props vs method call
假设我有一个呈现文本输入字段的组件 X + 一个 child 组件 Y。Y 使用输入字段中的文本来呈现其他内容。
为了获取数据，X 从文本字段中侦听更改事件，然后通过引用获取其更新的内容。
据我了解，我可以通过两种方式将数据传递给 child Y。
1) X 将新数据存储在它的状态中，因此它的渲染方法被触发，这里我使用像 <Y something={data}/>
这样的道具将数据传递给 Y
2) X 通过像 this.refs.y.setSomething(data) 一样使用 ref 来调用 Y 上的方法。在这种情况下，我不需要将数据存储在 X 的状态中。
所以除了在 X 中存储状态之外，选择其中一个而不是另一个的原因是什么？
您应该使用 props 将数据传递到子组件中，如 documentation 中那样。您可以将 props 视为子组件的函数参数。
除了在 React 中执行此操作的惯用方式外，我还可以想到您应该这样做的几个原因。首先，调用像 this.refs.y.setSomething(data) 这样的方法意味着您需要实现将状态存储在 Y 中的代码。因此您不必在 X 中设置状态，而是在 Y 中进行设置。
更重要的是，如果 X 由于某种原因在重新渲染期间卸载了 Y，然后又重新加载它，您将丢失 Y 中的状态。但是如果您传入 props，那么 Y 将收到相同的 props卸载之前和之后。
假设我有一个呈现文本输入字段的组件 X + 一个 child 组件 Y。Y 使用输入字段中的文本来呈现其他内容。
为了获取数据，X 从文本字段中侦听更改事件，然后通过引用获取其更新的内容。
据我了解，我可以通过两种方式将数据传递给 child Y。
1) X 将新数据存储在它的状态中，因此它的渲染方法被触发，这里我使用像 <Y something={data}/>
2) X 通过像 this.refs.y.setSomething(data) 一样使用 ref 来调用 Y 上的方法。在这种情况下，我不需要将数据存储在 X 的状态中。
所以除了在 X 中存储状态之外，选择其中一个而不是另一个的原因是什么？
您应该使用 props 将数据传递到子组件中，如 documentation 中那样。您可以将 props 视为子组件的函数参数。
除了在 React 中执行此操作的惯用方式外，我还可以想到您应该这样做的几个原因。首先，调用像 this.refs.y.setSomething(data) 这样的方法意味着您需要实现将状态存储在 Y 中的代码。因此您不必在 X 中设置状态，而是在 Y 中进行设置。
更重要的是，如果 X 由于某种原因在重新渲染期间卸载了 Y，然后又重新加载它，您将丢失 Y 中的状态。但是如果您传入 props，那么 Y 将收到相同的 props卸载之前和之后。