React Context+Hooks API=> 최적 상태 관리

어이!React는 많은 것에 좋아요.그러나 UI 테마나 로케일 기본 설정 같은 전역 상태가 필요할 때가 있습니다.현재 통상적으로 상태를 서브어셈블리에 전달하려면 우리가 해야 할 일은 도구를 전달하는 것이다.하지만 전 세계 국가에서는 나무나 감자를 구성하는 뿌리에 여러 차례 도구를 전달해야 한다.이로 인해 지주굴착이라고 불리는 번거로운 현상이 생겼다.이것은 우리가 도구를 조부모로부터 부모에게 전해주고 다시 아이에게 전해야 한다는 것을 의미한다.
지금 이 문제를 해결하려면 Redux 같은 것을 사용할 수 있습니다. 이것은 아주 좋은 해결 방안이지만, 전체 코드를 재구성해야 하고, 대량의 샘플 코드가 필요합니다.이것은 그것으로 하여금 경량급 실현에 적합하지 않게 한다.그러나 이것은 성능에 영향을 주지 않는다는 것을 명심하세요.

그럼 우리 어떡하지?
React Context API를 입력합니다.

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

이것은 정부의 소개다.React 16.3에서 도입되었습니다.그것은 전 세계 국가 관리 문제를 해결했다.상하문은 통상적으로 Redux의 경량급 대체 방안으로 치켜세워지고 더욱 깨끗하고 간단한 코드를 제공한다.우리 시작합시다!
간단한 React 애플리케이션을 만듭니다.create-react-app를 사용하여 하나를 생성합니다.그리고 App.js에 다음과 같은 내용을 적으세요.

function App() {
  return (
    <div className="App">
      <AppBar theme="white" />
    </div>
  );
}

function AppBar({theme}) {
  return(
    <div className="AppBar">
      <ThemedButton theme={theme}/>
    </div>
  );
}

function ThemedButton({theme}) {
  return(
    <div>
      <button style={{backgroundColor: theme}} />
    </div>
  )
}   
export default App;

위에서 보듯이, 우리는 테마 속성을 모든 구성 요소를 관통시켜야만 하위 요소에 적용할 수 있다.이것은 세 개의 구성 요소에 있어서는 좋을 수 있지만 완전한 동적 사이트를 상상해 보세요. 그 중의 구성 요소 트리는 크고 깊을 수 있습니다.
그럼 React 상하문에서 같은 일을 시도해 봅시다.현재, 상하문을 사용하기 전에, 이것은 소수의 구성 요소에 대한 소량의 도구가 아니라는 것을 기억해야 합니다.따라서 간단한 도구 라인과 구성 요소의 조합은 훨씬 간단할 것이다.그래서 현명하게 사용하세요.

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

function App() {
  return (
    <div className="App">
      <ThemeContext.Provider value={"black"}>
        <AppBar />
      </ThemeContext.Provider>
    </div>
  );
}

function AppBar() {
  return(
    <div className="AppBar">
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return(
    <div>
      <ThemeContext.Consumer>
        {value => <button style={{backgroundColor: value}} />}
      </ThemeContext.Consumer>
    </div>
  )
}   
export default App;

알겠습니다. 이것은 많은 새로운 코드입니다. 자세히 살펴보면 AppBar 과 ThemedButton 구성 요소 중의 도구가 이미 사라진 것을 발견할 수 있습니다.무슨 일이 있었죠?우리 그것을 전부 분해합시다.
코드 세션의 맨 위에 줄이 있으니 주의하세요.

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

이것이 React 컨텍스트 객체를 작성하는 이유입니다.현재 모든 상하문 대상에는 공급자와 사용자가 있다.마찬가지로, 만약 당신이 위의 코드를 참고한다면, 당신은 그것들을 볼 수 있을 것이다.

공급업체 및 소비자

//Provider
      <ThemeContext.Provider value={"black"}>
      </ThemeContext.Provider>
//Consumer
      <ThemeContext.Consumer>
      </ThemeContext.Consumer>

공급자 모듈은 소비 모듈이 상하문 변경을 구독할 수 있도록 합니다.
그것은 공급자의 후손인 소비 부품에 전달되는 value 도구를 받아들인다.따라서 공급자는 여러 소비자와 연결될 수 있다.구성 요소 트리의 더 깊은 값을 덮어쓰기 위해 공급자를 끼워 넣을 수도 있다.
공급자value의 아이템이 변경되면 공급자의 후손인 모든 사용자가 다시 나타난다.
소비자 모듈은 상하문 변경을 구독하는 모듈입니다.그러나 소비자 부품은 어린이와 같은 기능이 필요하다render props.함수는 현재 컨텍스트 값을 수신하고 React 노드를 반환합니다.
함수에 전달되는value 매개 변수는 트리에서 가장 가까운 상하문 제공 프로그램의value prop과 같습니다.그래서 위의 코드에서 나는 이 값을 사용하여 단추에 색을 칠했다.

      <ThemeContext.Consumer>
        {value => <button style={{backgroundColor: value}} />}
      </ThemeContext.Consumer>

컨텍스트 값 가져오기
이제 너는 상하문 API를 어떻게 사용하는지 안다.그러나 공급자를 보고 용례를 생각하면 JSX 코드에서 상하문을 추출하여 다른 기능을 수행하는 데 어려움이 있음을 곧 깨닫게 될 것입니다.물론 약간의 변통 방법이 있지만, 이것은 결코 이상적이지 않다.너는 어딘가에서 이 점을 볼 수 있지만, 그것은 통상적으로 남아 있다.
현재 ThemedButton 가 클래스 구성 요소라면 contextType으로 위아래 문장을 추출할 수 있습니다.
클래스의 contextType property는 상하문 대상을 지정할 수 있습니다.이것은 이 상하문 형식의 가장 가까운 현재 값을 사용할 수 있도록 합니다.렌더링 함수를 비롯한 라이프 사이클 메서드에서 이 옵션을 참조할 수 있습니다.그래서 우리는 이렇게 그것을 실현할 수 있다.

static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }

그러나 우리는 경량급 기능 구성 요소와 연결기를 사용합니다!기존의 코드를 재구성해 봅시다.

import React, { useContext } from 'react';

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

function App() {
  return (
    <div className="App">
      <ThemeContext.Provider value={"black"}>
        <AppBar />
      </ThemeContext.Provider>
    </div>
  );
}

function AppBar() {
  return(
    <div className="AppBar">
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext)
  return(
    <div>
        <button style={{backgroundColor: theme}} />
    </div>
  )
}   
export default App;

여기서 우리는 this.context 갈고리를 사용했는데 이것은 기능 부품 등 가격물useContext이다.contextType를 사용하면 프로그램을 제거하고 JSX 코드 외에 현재 상하문 값을 얻을 수 있습니다.

환경 업데이트
상하문을 갱신하는 것은 갱신 상태처럼 간단하다.기능 구성 요소에 대해 우리는 useContext 갈고리를 사용하여 하나의 함수를 전달함으로써 이를 실현할 수 있다. 이 함수는 상하문을 업데이트하고

import React, { useState, useContext } from "react";

const ThemeContext = React.createContext({ theme: "white", toggler: () => {} });

function App() {
  const [color, setColor] = useState("white");
  const toPass = {
    theme: color,
    toggler: () => {
      return color === "white" ? setColor("black") : setColor("white");
    },
  };
  return (
    <div className="App">
      <ThemeContext.Provider value={toPass}>
        <AppBar />
      </ThemeContext.Provider>
    </div>
  );
}

function AppBar() {
  return (
    <div className="AppBar">
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const context = useContext(ThemeContext);
  return (
    <div>
      <button
        style={{ backgroundColor: context.theme }}
        onClick={context.toggler}
      />
    </div>
  );
}
export default App;

위에서 보듯이 useState 상태는 전환 함수로 조종되고 우리는 상하문을 통해 이 함수를 전달했다.그런 다음 서브어셈블리의 버튼을 통해 전역 컨텍스트에서 전환 함수를 호출하여 전역 컨텍스트를 업데이트합니다.
됐다!현재, 상하문과 갈고리를 사용하여 전체 구성 요소 트리에서 전체 상태를 유지하는 방법을 알고 있습니다.
만약 당신이 상황을 더욱 깊이 이해하고 싶다면 공식 문서를 읽어 보세요.
Context - React
궁금한 거 있으면 orGitHub로 연락 주세요!