Как изменить значение контекста при использовании React Hook of useContext

Question

Использование крючка useContext с React 16.8+ работает хорошо.Вы можете создать компонент, использовать ловушку и использовать значения контекста без каких-либо проблем.

В чем я не уверен, так это в том, как применить изменения к значениям провайдера контекста.

1) Является ли ловушка useContext строго средством использования значений контекста?

2) Есть ли рекомендуемый способ, с помощью ловушек React, обновить значения из дочернего компонента, который затем будет запускать повторную визуализацию компонента для любогокомпоненты, использующие хук useContext с этим контекстом?

const ThemeContext = React.createContext({
  style: 'light',
  visible: true
});

function Content() {
  const { style, visible } = React.useContext(ThemeContext);

  const handleClick = () => {
    // change the context values to
    // style: 'dark'
    // visible: false
  }

  return (
    <div>
      <p>
        The theme is <em>{style}</em> and state of visibility is 
        <em> {visible.toString()}</em>
      </p>
      <button onClick={handleClick}>Change Theme</button>
    </div>
  )
};

function App() {
  return <Content />
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.2/umd/react-dom.production.min.js"></script>

Answer 1

Как обновить контекст с хуками, обсуждается в Как избежать передачи обратных вызовов? часть FAQ по хукам.

Аргумент, переданный createContext, будет только по умолчаниюзначение, если компонент, который использует useContext, не имеет Provider над ним вверх по дереву.Вместо этого вы можете создать Provider, который предоставляет style и visibility, а также функции для их переключения.

Пример

const { createContext, useContext, useState } = React;

const ThemeContext = createContext(null);

function Content() {
  const { style, visible, toggleStyle, toggleVisible } = useContext(
    ThemeContext
  );

  return (
    <div>
      <p>
        The theme is <em>{style}</em> and state of visibility is
        <em> {visible.toString()}</em>
      </p>
      <button onClick={toggleStyle}>Change Theme</button>
      <button onClick={toggleVisible}>Change Visibility</button>
    </div>
  );
}

function App() {
  const [style, setStyle] = useState("light");
  const [visible, setVisible] = useState(true);

  function toggleStyle() {
    setStyle(style => (style === "light" ? "dark" : "light"));
  }
  function toggleVisible() {
    setVisible(visible => !visible);
  }

  return (
    <ThemeContext.Provider
      value={{ style, visible, toggleStyle, toggleVisible }}
    >
      <Content />
    </ThemeContext.Provider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>