Как работают useContext Hooks

JavaScript React.js

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

У всех этих новых хуков React есть одна цель: сделать функциональные компоненты такими же мощными, как компоненты класса.

useContextХуки немного отличаются от других, но они все же могут быть полезны в определенных сценариях.

РеагироватьContext APIэто способ передачи данных глубоко в приложение без необходимости вручную передавать их по одному между несколькими родительскими и дочерними элементами.prop.当咱们需要的只是传递数据时，它可以作为像ReduxХорошая альтернатива таких инструментах.

использоватьContextProvierкомпоненты и объявитьvalueсвойства, затем объявленные в компонентах-потомкахConsumerкомпонент, этоConsumerПодкомпонент, может быть только уникальной функцией, параметр функцииContextнагрузка. Если есть несколькоContext ,Providerа такжеConsumerВложенные в любом порядке.

Кроме того, мы также можем настроить таргетинг на любойContextиспользоватьcontextTypeупростить этоContextполучение нагрузки. Но в компоненте, даже потребляющем несколькоContext,contextTypeОн может указывать только на один из них.

существуетHooksсреде, его все еще можно использоватьConsumer,ноContextTypeСтатический член класса определенно бесполезен. Крючки обеспечиваютuseContextConsumerСложные проблемы тоже решаютсяcontextTypeиспользовать только одинcontextЭта проблема.

Стандартный путь

import React from "react";
import ReactDOM from "react-dom";

// 创建 Context
const NumberContext = React.createContext();
// 它返回一个具有两个值的对象
// { Provider, Consumer }

function App() {
  // 使用 Provider 为所有子孙代提供 value 值 
  return (
    <NumberContext.Provider value={42}>
      <div>
        <Display />
      </div>
    </NumberContext.Provider>
  );
}

function Display() {
  // 使用 Consumer 从上下文中获取 value
  return (
    <NumberContext.Consumer>
      {value => <div>The answer is {value}.</div>}
    </NumberContext.Consumer>
  );
}

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

МогуCodeSandbox

использоватьuseContextхук, чтобы переписать приведенный выше пример

import React, { useContext } from 'react';

// ...

function Display() {
  const value = useContext(NumberContext);
  return <div>The answer is {value}.</div>;
}

передачаuseContext, перешел изReact.createContextПолученный объект контекста.

Единственное предостережениеДело в том, что вы должны передать весь объект контекста вuseContext- не простоConsumer, конечно, если вы забудете,ReactБудет вынесено предупреждение.

Вложенные потребители

Вы можете столкнуться с такой ситуацией, наши компоненты должны получать данные из нескольких родителей, что привело к такому коду

function HeaderBar() {
  return (
    <CurrentUser.Consumer>
      {user =>
        <Notifications.Consumer>
          {notifications =>
            <header>
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            </header>
          }
      }
    </CurrentUser.Consumer>
  );
}

Это массивное гнездование просто для получения двух значений. Ниже используютuseContextКогда эффект:

function HeaderBar() {
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);

  return (
    <header>
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    </header>
  );
}

Суммировать

useContextполучитьcontextобъект (React.createContextвозвращаемое значение) и вернутьcontextтекущее значение . токcontextЗначение является ближайшим к текущим компонентам в верхнем компоненте.<CountContext.Provider>изvalue

<CountContext.Provider>CountContext providerКонтекстvalueстоимость.

Не забудьuseContextАргумент должен бытьcontextСам объект:

  • Правильно: использоватьContext(MyContext)
  • Ошибка: useContext(MyContext.Consumer)
  • Ошибка: useContext(MyContext.Provider)

называетсяuseContextкомпоненты всегда будут вcontextПовторно рендерится при изменении значения. Если повторный рендеринг компонента обходится дорого, вы можете сделать это, используяmemoizationоптимизировать.

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

Ссылаться на:

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории