Javascript 通过道具对方法调用传递数据作出反应

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

为了获取数据，X从文本字段中侦听更改事件，然后通过ref获取其更新的内容

现在，据我所知，我可以通过两种方式将数据传递给孩子Y

1） X以其状态存储新数据，因此其渲染方法被触发，在这里，我使用

等道具将数据传递给Y

2） X通过像this.refs.Y.setSomething（data）一样使用ref调用Y上的方法。在这种情况下，我不需要以X的状态存储数据

---

因此，除了在X中存储状态外，选择一个而不是另一个的原因是什么？

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

除了在React中使用惯用的方法之外，我可以想出一些您应该这样做的原因。首先，调用像this.refs.y.setSomething（data）这样的方法意味着您需要实现将状态存储在y中的代码。因此您不必在X中设置状态，而是在y中进行设置

---

更重要的是，如果X在重新渲染过程中出于某种原因卸载了Y，然后又重新装载，则Y中的状态将丢失。但如果您传递道具，则Y将在卸载之前和之后收到相同的道具。

我添加了一条注释，因为这不是此问题的答案。第三种方法是使用Fluxxor。创建一个可从所有组件访问的存储，避免所有道具通过hanks，现在我很清楚了。我使用的是MaterialUI组件，其中很多都有设置和获取数据的方法，所以我开始怀疑。但我理解，国家（如果有的话）应该生活在父组件X中，而不是拥有的组件Y中。