React Hooks: Context.Provider 생성 및 업데이트 방법

21288 단어 react reacthooks hooks reactcontext

"React Hooks"에 대해 처음 듣는다면 그것에 대해 알 수 있습니다. 그만한 가치가 있습니다!

새 APIyou can go to their docs를 설명하는 데 너무 많은 시간을 할애하지 않겠습니다. React 팀은 모든 이유와 그들이 거기에 도달한 방법을 설명하는 놀라운 작업을 수행했습니다.

시작하기

실습 예제가 있으면 모든 것이 더 좋습니다. 다음과 같이 시작하겠습니다.

$ mkdir react-hooks-contex-provider
$ cd react-hooks-contex-provider
$ yarn init -y
$ yarn add react@^16.7.0-alpha.0 react-dom@^16.7.0-alpha.0
$ yarn add parcel-bundler

이 상용구를 사용하여 다음을 수행했습니다.

사용 가능한 모든 후크use*가 있는 알파 버전에서 반응

로컬 예제를 실행하기 위한 소포 번들러

HTML 파일을 추가해 보겠습니다.

$ touch index.html

일부 HTML을 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Parcel</title>
</head>
<body>
  <div id="root"></div>
  <script src="./src/index.js"></script>
</body>
</html>

HTML에서 볼 수 있듯이 ./src/index.js 파일이 있습니다. 생성해 보겠습니다.

$ mkdir src
$ touch src/index.js

일부 자바스크립트를 추가합니다.

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

import { ContextOneProvider } from "./ContextOne";
import { App } from "./App";

function main(target, container) {
  ReactDOM.render(target, container);
}

main(
  <ContextOneProvider>
    <App />
  </ContextOneProvider>,
  document.getElementById("root")
);

여기서 다른 점은 없습니다. ReactDOM.render라는 컨텍스트에 래핑된 App라는 구성 요소를 렌더링하는 친숙한 ContextOneProvider가 있습니다.

ContextOne 파일 만들기

우리 ./src/index.js 의 후속 작업은 우리 ./src/ContextOne.js 가 될 수 있습니다. 생성해 보겠습니다.

$ touch src/ContextOne.js

그리고 아래 코드 스니펫을 사용하십시오.

import * as React from "react";

let ContextOne = React.createContext();

let initialState = {
  count: 10,
  currentColor: "#bada55"
};

let reducer = (state, action) => {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    case "set-color":
      return { ...state, currentColor: action.payload };
  }
};

function ContextOneProvider(props) {
  // [A]
  let [state, dispatch] = React.useReducer(reducer, initialState);
  let value = { state, dispatch };


  // [B]
  return (
    <ContextOne.Provider value={value}>{props.children}</ContextOne.Provider>
  );
}

let ContextOneConsumer = ContextOne.Consumer;

// [C]
export { ContextOne, ContextOneProvider, ContextOneConsumer };

여기에 새로운 얼굴이 있습니다. 코드의 90%는 매우 친숙합니다. 항목 [A], [B], [C]를 살펴보겠습니다.

[A]: 새 제품React Hooks API here, called useReducer 을 사용하고 있습니다. Redux에 익숙하다면 이것이 어떻게 작동하는지 이미 알고 있을 것입니다. state 객체와 dispatch 함수를 반환하여 스토어 상태로 업데이트를 보냅니다. 둘 다 사용하여 value 개체를 만들고 항목 [B]로 보냅니다.

[B]: 여기에서는 컨텍스트 공급자를 사용하여 value 개체를 주입하여 모든 소비자가 사용할 수 있도록 합니다. 이전에 우리는 그것을 사용하여 <App /> 를 ./src/index.js 로 래핑하는 것을 보았습니다. 즉, <App /> 의 모든 하위 구성 요소가 이 컨텍스트를 꺼내 사용할 수 있습니다.

[C]: 언뜻 보기에 이 내보내기는 이상합니다. React에서 생성한 기본 컨텍스트 개체(ContextOne ), 사용자 지정 공급자(ContextOneProvider ) 및 소비자 키에 대한 별칭(ContextOneConsumer )을 내보내고 있습니다. 새Reactk Hooks API for context, called useContext 를 사용하려면 첫 번째 내보내기인 React에서 생성한 기본 객체를 전달해야 합니다. 두 번째 내보내기ContextOneProvider 는 사용자 정의 제공자로서 앱 컨텍스트에서 원하는 것을 주입하는 데 사용해야 합니다. 마지막 내보내기인 ContextOneConsumer 는 컨텍스트 변경 사항인 this is a stable feature from React 을 구독하기 위한 편의일 뿐입니다.

앱 파일 만들기

마지막으로 ./src/App.js 파일에 초점을 맞추겠습니다.

$ touch src/App.js

그리고 일부 JavaScript를 붙여넣습니다.

import * as React from "react";

import { ContextOne } from "./ContextOne";

export function App() {
  // [A]
  let { state, dispatch } = React.useContext(ContextOne);

  // [B]
  React.useEffect(
    () => {
      document.body.style.backgroundColor = state.currentColor;
    },
    [state.currentColor]
  );

  // [C]
  let inc = () => dispatch({ type: "increment" });
  let dec = () => dispatch({ type: "decrement" });
  let reset = () => dispatch({ type: "reset" });
  let setColor = color => () => dispatch({ type: "set-color", payload: color });

  return (
    <React.Fragment>
      <div style={{ textAlign: "center" }}>
        <p>
          Current color is: <b>{state.currentColor}</b>
        </p>
        <p>
          Current count: <b>{state.count}</b>
        </p>
      </div>
      <div style={{ paddingTop: 40 }}>
        <p>Count controls:</p>
        <button onClick={inc}>Increment!</button>
        <button onClick={dec}>Decrement!</button>
      </div>
      <div>
        <p>Color controls:</p>
        <button onClick={setColor("green")}>Change to green!</button>
        <button onClick={setColor("papayawhip")}>Change to papayawhip!</button>
      </div>
      <div>
        <p>Reset changes:</p>
        <button onClick={reset}>Reset!</button>
      </div>
    </React.Fragment>
  );
}

와우, 지금은 어때? 다시 말하지만 코드의 90%는 익숙합니다. 나머지 10%를 살펴보겠습니다.

[A]: 우리는 컨텍스트를 사용하기 위해 new React Hooks API called useContext을 사용하고 있습니다. 공급자가 업데이트되면 이 후크는 최신 컨텍스트 값으로 다시 렌더링을 트리거합니다.

[B]: 또 다른 새로운 React Hooks API called useEffect . 효과를 React의 순전히 기능적인 세계에서 명령형 세계로 들어가는 탈출구라고 생각하세요. 모든 변형, 구독, 타이머 및 기타 부작용을 이 후크를 사용하여 수행할 수 있습니다. 첫 번째 매개변수로 효과가 있는 함수를 전달하고 본문 배경색을 변경합니다. 두 번째 매개변수로 배열을 전달하고 있습니다. 이 배열은 "이 소품/값이 변경되었을 때 내 효과를 실행하세요"라고 반응합니다.

[C]: 일반 JavaScript 화살표 함수이지만 주목할 가치가 있는 점은 컨텍스트에서 ContextOne 함수를 사용하여 공급자를 업데이트한다는 것입니다.

예제 실행

이제 실제 거래에 도달했습니다. 예제를 실행해 보겠습니다.

$ yarn parcel index.html

다음과 같은 내용이 표시되어야 합니다.

dispatch를 엽니다.

결론

React Hooks API은 매우 강력합니다. 켜져 있습니다. 이미 great examples on GitHub이 있습니다.

어떻게 생각해? 푹 빠졌어? :피

Reference

이 문제에 관하여(React Hooks: Context.Provider 생성 및 업데이트 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/oieduardorabelo/react-hooks-how-to-create-and-update-contextprovider-1f68

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

"진행 어떻습니까"프로그램에서 형태소 해석 엔진 MeCab 적용

prettytable을 사용하여 간단한 테이블 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다