React'теги useContext контекст хуку

Бул сабакта биз контекст менен иштоону улантабыз. Азыр компоненттер дарагынын курабыз. Баштоо үчүн өзүнчө файлда React компонентин түзөбүз BigBox:

BigBox.jsxfunction BigBox() {
  return (
    <p>bigbox</p>
  );
}

Аны импорттоп, башкы компонентибиз Appге жайгаштырабыз:

App.jsximport BigBox from './BigBox';

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

Түшүнүктүү болушу үчүн дивтерди бир аз стилдештиребиз. Бул үчүн styles.css файлын түзөбүз:

styles.cssdiv {
  border: 1px solid blue;
  margin: 10px;
  text-align: center;
  max-width: 300px;
}

Аны App.jsге импорттоону унутпайлы:

App.jsximport './styles.css';

Азыр өзүнчө файлда MiddleBox компонентин түзөбүз:

MiddleBox.jsxfunction MiddleBox() {
  return (
    <p>middlebox</p>
  );
}

Жана аны чоң кутучага BigBoxга салабыз:

BigBox.jsximport MiddleBox from './MiddleBox';

function BigBox() {
  return (
    <div>
      <MiddleBox />
    </div>
  );
}

Кичинекей кутуча менен SmallBox менен дагы ушундай кылабыз:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>Мен ... </p>
  );
}

Эки ушундай кутучаны MiddleBoxга жайгаштырабыз:

MiddleBox.jsximport SmallBox from './SmallBox';

function MiddleBox() {
  return (
    <div>
      <SmallBox />
      <SmallBox />
    </div>
  );
}

Даракты курдук. Эми биз Appтен, мисалы, SmallBoxка 'small box :)' сап маанисин бергибиз келет, пропстарды колдонбой, контекстти колдонуп (балким биздин кутуча тиркемесиз чоң өлчөмгө чейин өсөт).

Контекст файлын MyContext.js биз мурунку сабакта түзгөн бүлөк жана туташтырганбыз.

Кийинки кадам, биз кыла турган - BigBoxты контекст провайдерине ороп коёбуз, ал биздин контекст объектибиздин MyContext касиети болуп саналат. Эми ушул курулмага киргизилген бардык компоненттер (жана бул BigBoxка киргизилген бардык кутучалар) контекстке кирип, анын өзгөрүүлөрүнө жазыла алат. Контексттин мааниси катары биз каалаган 'small box :)' беребиз:

App.jsxfunction App() {
  return (
    <MyContext.Provider value="small box :)">
      <BigBox />
    </MyContext.Provider>
  );
}

Эми контексттин маанисин окушубуз калды. Биз аны SmallBoxта колдонууну кааладык, демек ал жерге контекст файлын MyContext.js жана useContext хукун импорттойбуз:

SmallBox.jsximport { useContext } from 'react';
import { MyContext } from './MyContext.js';

useContext жардамы менен контексттин маанисин name өзгөрмөсүнө окуйбуз:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Мен ... </p>
    </div>
  );
}

Биз SmallBoxты бул контекстке жазылдык жана, эгер ал өзгөрсө, бул компонент дагы жаңыртылат.

Жана, акырында, name өзгөрмөсүнүн маанисин үч чекиттин ордуна коёбуз:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Мен {name} </p>
    </div>
  );
}