Может ли поставщик контекста React с сохранением состояния увеличить количество повторных рендерингов?

#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 .