Контекст в ReactJS

Что такое контекст в React?

React Context — это метод передачи реквизитов от родительского к дочерним компонентам путем сохранения реквизитов в хранилище и использования этих реквизитов из хранилища дочерними компонентами без фактической передачи их вручную на каждом уровне дерева компонентов.
В типичном приложении React данные передаются сверху вниз (от родителя к дочернему элементу) через свойства, но такое использование может быть громоздким для определенных типов свойств (например, предпочтения локали, темы пользовательского интерфейса), которые требуются для многих компонентов в приложении. Контекст предоставляет способ обмена такими значениями между компонентами без необходимости явно передавать свойство через каждый уровень дерева.

Где мы используем контекст в React?

Всякий раз, когда требуется, чтобы хранилище сохраняло состояния или переменные и использовало их в другом месте программы, используется контекст. Как правило, когда у нас есть два или более уровня (высоты) в нашем дереве компонентов, целесообразно использовать хранилище вместо передачи реквизитов, а затем поднимать состояние, поскольку это создаст путаницу и ненужный длинный код.
Контекст предназначен для обмена данными, которые можно считать «глобальными» для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочитаемый язык.

Каковы преимущества контекста в React?

Одна из самых важных особенностей React заключается в том, что данные текут только в одном направлении, что позволяет разработчикам предсказывать.
Это позволяет легко отлаживать.
Он обеспечивает возможность повторного использования.

Контекст позволяет нам передавать значение глубоко в дерево компонентов, не пропуская его явно через каждый компонент. Создайте контекст для текущей темы (с «светлым» по умолчанию).

// Context lets us pass a value deep into the component tree
// without joining it through every component.


const ThemeContext = React.createContext('light');

class App extends React.Component {
 render() {

// Use a Provider to pass the current theme to the tree below.    
// Any component can read it, no matter how deep it is.    
// In this example, we're passing "dark" as the current value.

return (    
  <ThemeContext.Provider value="dark">      
    <Toolbar />        
  </ThemeContext.Provider>      
);    
  }
}


// A component in the middle doesn't have to
// pass the theme down explicitly anymore.

function Toolbar() {

  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // Assign a contextType to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
  }

С помощью контекстного API мы можем избежать передачи реквизитов через промежуточные элементы и напрямую передать реквизиты последнему дочернему элементу или дочернему элементу, на который мы нацелились:

// Context lets us pass a value deep into the component tree
  // without explicitly threading it through every component.
 // Create a context for the current theme (with "light" as the default).
 const ThemeContext = React.createContext('light');

 class App extends React.Component {
   render() {
     // Use a Provider to pass the current theme to the tree below.
     // Any component can read it, no matter how deep it is.
     // In this example, we're passing "dark" as the current value.
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
       </ThemeContext.Provider>
     );
   }
 }

 // A component in the middle doesn't have to
 // pass the theme down explicitly anymore.
 function Toolbar() {
   return (
     <div>
       <ThemedButton />
     </div>
   );
 }

Часть 2

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import reducer, { initialState } from "./reducer";
import { DataLayer } from "./DataLayer";
ReactDOM.render(
  <React.StrictMode>
    <DataLayer initialState={initialState} reducer={reducer}>
      <App />
    </DataLayer>
  </React.StrictMode>,
  document.getElementById("root")
);
class ThemedButton extends React.Component {
  // Assign a contextType to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}
class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

Каждый объект Context поставляется с компонентом Provider React, который позволяет потребляющим компонентам подписываться на изменения контекста. Все, что нам нужно сделать, это создать переменную (здесь это initialState) и присвоить ей и провайдеру начальное значение. Это начальное значение зависит от проекта, который вы делаете.

Для получения дополнительной информации я настоятельно рекомендую перейти к официальной документации и прочитать их руководства по адресу https://reactjs.org/docs/context.html.

Заключение

Следовательно, React Context API — это способ создания глобальных переменных, которые можно передавать в приложении React. Это альтернатива «сверлению реквизита» или передаче реквизита от бабушки и дедушки к родителю, потомку и так далее.

Спасибо! Я надеюсь, что вы нашли это ценным!