Реагировать передачу данных через реквизит и вызов метода

Question

Скажем, у меня есть компонент X, который отображает текстовое поле ввода + дочерний компонент Y. Y использует текст из поля ввода, чтобы сделать что-то еще.

Чтобы получить данные, X прослушивает событие изменения из текстового поля, а затем захватывает его обновленный контент с помощью ссылки.

Теперь, насколько я понимаю, я могу передать данные ребенку Y двумя способами.

1) X сохраняет новые данные в своем состоянии, поэтому его делает метод срабатывает, и здесь я передаю данные в Y с использованием реквизита, как <Y something={data}/>

2) X вызывает метод Y, используя его исм подобный this.refs.y.setSomething(data). В этом случае мне не нужно хранить данные в состоянии X.

Таким образом, помимо сохранения состояния в X, в чем причины выбора одного из них?

Answer 1

Вы должны передать данные в дочерний компонент, используя реквизит, как в documentation. Вы можете представить реквизит в качестве аргументов функции для дочерних компонентов.

Помимо того, что я идиоматический способ сделать это в реактиве, я могу придумать несколько причин, почему вы должны это делать. Во-первых, вызов метода, такого как this.refs.y.setSomething(data), будет означать, что вам нужно реализовать код для хранения состояния в Y. Таким образом, вам не нужно было устанавливать состояние в X, но вы делаете это вместо Y.

Что еще более важно, если X по какой-то причине отключает Y во время повторной визуализации, а затем снова монтирует его, вы потеряете состояние в Y. Но если вы проходите в реквизитах, тогда Y получит тот же реквизит перед и после его размонтирования.