通过props与方法调用反应传递数据

Question

Say I have a component X which renders a text input field + a child component Y. Y uses the text from the input field to render something else.

To get the data, X listens for a change event from the text field, and then grabs its updated content via a ref.

Now as I understand it I can pass the data to child Y in two ways.

1) X stores the new data in its state, so its render method is triggered, and here I pass the data to Y using props like <Y something={data}/>

2) X calls a method on Y by using it ref like this.refs.y.setSomething(data) . In this case I don't need to store the data in the state of X.

So apart from storing state in X, what are the reasons to choose one over the other?

Answer 1

You should pass the data into the child component using props, as in the documentation . You can think of the props as the function arguments for the child components.

Other than being the idiomatic way to do this in React, I can think of a few reasons why you should do this. Firstly, calling a method like this.refs.y.setSomething(data) will mean that you need to implement code for storing the state in Y. So you haven't had to set state in X, but you do it in Y instead.

More importantly, if X for some reason unmounts Y during a re-render and then later remounts it, you will have lost the state in Y. But if you are passing in props, then Y would receive the same props before and after it's unmounted.