Может ли компонент иметь собственное состояние?
Всякий раз, когда я использую такие фреймворки, как React, Vue или что-то еще. Я вижу, что каждое значение (входное значение, выбранное значение...) всегда передается через события родительскому элементу. Я действительно не понимаю, почему это хорошо. Требуется больше ресурсов/времени, чтобы передать его родительскому компоненту. Почему компонент не обрабатывает свои данные сам по себе?? Почему каждое отдельное значение внутри дочернего компонента должно передаваться в состояние родителя для обработки данных? Например, я обычно вижу загрузку API в родительском элементе, а затем значения API передаются через реквизиты или Redux/Vuex. Почему мы не можем получить значения API внутри дочернего элемента напрямую, когда он монтируется, вместо того, чтобы передавать его на многих уровнях или через локальное хранилище
У меня есть вопрос, давайте предположим, что у вас есть компонент тегов, который содержит такие теги меток. google.com/… Заполняет ли этот компонент свои данные() массивом, содержащим все теги, или это должен обрабатывать родительский компонент?
Родительскому компоненту, вероятно, нужен массив тегов, да. Однако, если бы это был список автозаполнения, родителю не понадобилось бы значение поля ввода автозаполнения или список тегов, соответствующих вводу пользователя, и т. д.
Ответы 1
Вполне допустимо иметь состояние внутри повторно используемого компонента, особенно если он содержит ввод данных пользователем. Вы по-прежнему можете предоставить ему обратные вызовы в свойствах, которые реагируют на onChange, onBlur или другие события в зависимости от ваших потребностей, или вы можете общаться со своим повторно используемым компонентом через ссылки, что является довольно гибким способом получения пользовательского ввода.
Важно то, что повторно используемый компонент должен быть как можно более независимым от своей среды. Если вы не предоставите ему состояние, компонент (в случае ваших сборщиков) будет зависеть от реквизитов, переданных от его родителя, выражающих его текущий пользовательский ввод при каждом повторном рендеринге, и от обратных вызовов, обновляющих его текущий ввод где-то выше в иерархии компонентов. при каждом изменении, а это не то, что вы хотите в каждом случае, и это уже заставляет вас вносить относительно большие корректировки в ваш родительский компонент, что упускает возможность повторного использования.
Да, у компонента обычно есть собственное состояние — в Vue функция data() или переменные в функции setup() Vue3. Через события или свойства передается только информация, важная для родительских/дочерних компонентов.