Можно ли использовать React.context для совместного использования общего объекта?

Question

Итак, я читал об использовании контекста реакции, чтобы избежать бурения реквизита.Базовый пример - это компонент, который предоставляет значение, которое само сохраняется в состоянии Компонент:

<ThemeContext.Provider value={this.state.shared, updateMyState}>

, и потребитель, который использует это значение.

Могу ли я вместо этого поделиться значением экспортированного списка или компонент, который предоставляет провайдеру, всегда ссылается на его состояние или статическое значение?

Вот что я имею в виду:

файл ./list:

export const list = [];
export const updateList = (val) => list.push(val);

файл ./provider:

import Provider from './provider'
import {list, updateList} from ./list

{Provider, Consumer} = React.createContext();
export ProviderComponent = () => 
   <Provider value={list, updateList}>
      <children>
   </Provider>
}

Answer 1

Да, вы можете.Если вы обеспокоены тем, что импорт модуля несколько раз создает несколько экземпляров объекта списка, когда вы выполняете импорт, например import { a, b } from './file, ссылка на ./file указывается только один раз ( Проверьте этот ответ stackoverflow ).

Я думаю, что ваш синтаксис слегка отключен, он должен быть

<Provider value={{ list, updateList }}>