#javascript #reactjs #react-native #react-redux
#javascript #reactjs #react-native #react-redux
Вопрос:
Представьте себе поставщика контекста с отслеживанием состояния, подобного этому:
const CurrentUserContext = React.createContext(null);
export default CurrentUserContext;
export function CurrentUserProvider(props) {
const [data, setData] = useStateWithCallback(null);
return (
<CurrentUserContext.Provider value={{ data, setData }}>
{props.children}
</CurrentUserContext.Provider>
);
}
и СПЕЦИАЛЬНЫЙ для его использования:
import { CurrentUserContext } from "../../context";
const withCurrentUser = (Component) => (props) => (
<CurrentUserContext.Consumer>
{(currentUser) => <Component {...props} currentUser={currentUser} />}
</CurrentUserContext.Consumer>
);
export default withCurrentUser;
В моей ситуации у меня есть экран под названием «Профиль», который отображает данные текущего пользователя (его аватар в пользовательском компоненте под названием «Заголовок» и некоторый текст (также относительно его данных) в «текстовом» компоненте React Native по умолчанию).).
ProfileScreen [Родительский] —> Заголовок [дочерний элемент]
Поскольку этот компонент «Заголовок» используется только на этом экране, я подумал сделать:
export default withCurrentUser(Header)
итак, мне не нужно передавать данные текущего пользователя в качестве реквизита с экрана профиля (который также обернут этим HOC).
С помощью CurrentUser(ProfileScreen) [Родительский] —> С помощью CurrentUser(заголовок) [Дочерний]
Теперь представьте, что случайный узел дерева полных компонентов обновляет состояние этого поставщика контекста… Вот где возникает мой вопрос. Есть ли вероятность сделать ненужный повторный рендеринг в ситуации, которую я описал? Я имею в виду, возможно ли, что пользовательский компонент заголовка повторно отображается перед экраном профиля, а затем, когда экран профиля повторно отображается, его дочерний элемент (заголовок) также повторно отображается? Или все будет отображаться последовательно?
Я спрашиваю об этом, потому что я не уверен, было бы лучше передавать пользовательские данные с экрана «Профиль» всем его дочерним компонентам, которые этого требуют, с одним потребителем контекста или с несколькими потребителями контекста (экран и все его дочерние элементы, которым требуются пользовательские данные)и игнорируйте передачу данных в качестве prop.
Комментарии:
1. Почему вы используете HOC, когда вы можете использовать пользовательские перехваты ?…
2. У меня также есть компоненты класса, которые хотят использовать эту функциональность. Вот почему я реализовал это как HOC. В любом случае, мой уровень реагирования недостаточно профессиональный, возможно, в компонентах класса можно использовать пользовательские перехваты. Но, как я понимаю, по определению, перехваты связаны с функциональными компонентами.
Ответ №1:
Мой совет: если это один уровень, передайте его как реквизит, не пытайтесь придумать причудливый способ. Что касается вашего вопроса, да, вы можете увеличить обновления, обновив реквизит или если у вас есть редуктор, отправляющий действия. К счастью, контекстный API перенаправляет все представления, вы можете проверить examppe, который у них есть здесь, и сравнить
https://www.smashingmagazine.com/2020/01/introduction-react-context-api/
Если вы используете перехваты React, вы должны написать свое СОСТОЯНИЕ ИСПОЛЬЗОВАНИЯ
например, const [foo, setFoo] = useState(() => bar)
Это будет выполняться только при монтировании. Если вы подписались, обязательно отпишитесь. Надеюсь, это поможет. Чтобы поддерживать обновление состояния, обязательно обновите состояние с помощью соответствующего const .