Реакция: передача родителя в потомка
Я работаю над приложением React, и мне нужно изменить родительское состояние из дочернего компонента. Конечно, я мог бы просто написать функцию в родительском элементе и передать ее дочернему элементу как опору (как, кажется, все остальные). Однако я попытался вместо этого передать весь родительский элемент в качестве опоры для дочернего элемента, чтобы ребенок мог свободно изменять состояние родительского элемента.
Вот как мои родители выглядят со своими детьми:
{this.state.entries.map(entry => (
<UserEntry
...
mainThis = {this}
/>
))}
Обратите внимание, как я передаю весь родительский элемент дочернему элементу в качестве опоры с this. Затем из моего дочернего кода я могу изменить родительское состояние с помощью простого this.props.mainThis.setState().
Конечно, это сработало, и я очень доволен собой. Однако мне интересно, почему люди этого не делают. Повлияет ли это на производительность в долгосрочной перспективе или что-то в этом роде?
Ответы 2
По мере того, как ваша кодовая база становится больше и сложнее, вы обнаружите, что пытаетесь найти способ управлять сложностью. Это важно для уменьшения количества ошибок и добавления новых функций. Это открывает банку с червями.
Вот пример. Вы делаете это от одного родителя к ребенку. У дочернего элемента также есть список элементов, на которые он передает ссылку this. Выяснение того, какой дочерний элемент обновляет состояние, вызывающее ошибку, из данных становится рутиной. У вас не будет хорошего места, чтобы сбросить точку отладки, чтобы увидеть значения, и работа будет сложнее
Большим преимуществом React является идея компонента. React делает компонент многоразовым и автономным. Если вы начнете передавать ссылку this, ваш родительский компонент станет тесно связанным с дочерним компонентом. Становится труднее разглядеть функции каждого компонента.
Не стесняйтесь экспериментировать с этим рисунком. Когда кодовая база достигнет критической точки, вы очень быстро почувствуете боль от этого выбора дизайна.
добавив к тому, что сказал @lelandBarton, у вас может возникнуть соблазн передать это дальше, когда отладка станет беспорядочной. это может дать вам некоторые преимущества на данный момент, но в долгосрочной перспективе это может распространиться на весь проект, поскольку люди будут пытаться следовать уже отработанной стратегии. Таким образом, трудности возрастают в случае проблем, которые неизбежно произойдут, в зависимости от того, насколько глубоко это входит в проект. Попробуйте использовать родительские обработчики. Если вам это не нравится, ограничьте это использование только этим. Всего наилучшего :)
I am wondering why people are not doing this. Would it affect performance in the long run, or something?
Это усложнит ваш код для отлаживать, понимать и контрольная работа из-за тесной связи между родительским и дочерним. Это также противоречит принципам инкапсуляции, потому что дочерний компонент не должен ничего знать о состоянии и внутренней реализации родительского компонента и наоборот. Компоненты должны быть слабо связаны.
Это не имеет ничего общего с производительностью кода, но в долгосрочной перспективе наверняка повлияет на производительность вашей команды.
Бонусное чтение: 7 архитектурных атрибутов надежного компонента React
Если чей-то ответ решил вашу проблему, вы можете принять его как ответ, установив большой флажок. i.stack.imgur.com/QpogP.png