React 갈고리 재방문:useContext

일을 상하문에 두다

Context는 내가 가장 좋아하는 React API 중 하나로 여러 가지 용례가 있다.나는 이전에 사용ref과 상하문에서 검색 UI를 다시 만들고, 갈고리를 어떻게 사용하는지에 대해 쓴 적이 있다.이번에 우리는 useRef 갈고리를 토론할 것이다. 이것은 우리가 함수 구성 요소에서 상하문을 사용하는 방식이다.
구성 요소의 하위 트리에서 응용 프로그램 데이터의 모든 부분을 구분할 수 있기 때문에 Context API를 좋아합니다.기본적으로 서브어셈블리는 useContext 에서 제공하는 value 도구를 통해 데이터에 접근할 수 있습니다.너는 그것을 이 나무를 전문적으로 겨냥한 상점으로 상상할 수 있다.공급자가 포장한 구성 요소는 데이터 (즉 소비자) 를 사용할 것인지를 선택할 수 있습니다. 이것은 당신이 피할 수 있다는 것을 의미합니다 prop drilling.다음은 대략적인 설명입니다.

Context.Provider components에서 우리는 class와 <Context.Provider> 표기의 조합을 사용하여 상술한 관계를 맺는다.그러나 함수 구성 요소에서 <Context.Consumer> 문법은 replaced with the <Context.Cosumer> hook 이다.
상하문 (쌍관어가 없음) 에 대해 아래의 코드 부분은 같은 상하문의 이 두 가지 실현을 보여 준다.비록 문법 차이가 존재하지만 기능은 같다.

function NestedComponent() {
  return (
    <AppContext.Consumer>
      {value => 
        <p>{value}</p>
      }
    </AppContext.Consumer>
  );
}

export default class App extends React.Component {
  render() {
    return (
      <div className="App">
        <AppContext.Provider value={"Hello from App 👋"}>
          <ChildComponent>
            <GrandChild>
              <NestedComponent />
            </GrandChild>
          </ChildComponent>
        </AppContext.Provider>
      </div>
    );
  }
}

useContext 분석

useContext 갈고리는 매개 변수, 상하문 대상을 받아들여 구성 요소 트리에서 위쪽의 가장 가까운 useContext 값에 접근할 수 있습니다.Context.Provider로부터 데이터를 사용하는 모든 구성 요소는 값이 변경될 때 항상 다시 렌더링됩니다.

const AppContext = React.createContext();

function NestedComponent() {
  const appContext = useContext(AppContext);
  return <p>{appContext}</p>;
}

function App() {
  return (
    <div className="App">
      <AppContext.Provider value={"Hello from App 👋"}>
        <ChildComponent>
          <GrandChild>
            <NestedComponent />
          </GrandChild>
        </ChildComponent>
      </AppContext.Provider>
    </div>
  );
}

우리가 Provider 갈고리를 사용하더라도 상하문과 useContext 방식을 정의하는 것은 위의 Provider 예시와 완전히 같다.공급자의 작동 방식은 다음과 같은 소비 문법을 사용하더라도 동일합니다.

class

useContext()

Class.contextType

실제로

아래의 샌드박스에서 나는 구성 요소 트리를 구축했다. 이것은 우리가 앞의 글<Context.Consumer> 갈고리에 구축한 SearchInput 구성 요소를 사용하는 검색 작은 위젯을 나타낸다.
이 프레젠테이션에서 필라델피아 맥주 공장의 데이터를 useRef 구성 요소에서 results.json 구성 요소로 직접 불러오고 Search 구성 요소에서 ResultCard 로 표시하는 API 호출을 시뮬레이션했습니다.그리고 언제든지SearchResults의 텍스트 값이 바뀌면 우리는 결과를 양조장에 필터합니다. 이 양조장의 이름에는 입력한 텍스트와 일치하는 문자열이 포함되어 있습니다.
아래에서 직접 시도하십시오.SearchInput 에서 우리는 Search 를 사용하여 SearchContext 를 만들었다.이렇게 하면 우리는 다이아몬드 React.createContext() 구성 요소를 지원하지 않고 상하문 값을 SearchResults 및 SearchInput 에 전달할 수 있다.비록 이 예에서 우리는 하나의 추가 구성 요소만 통해 도구를 전달하지만, 이 전략이 더 멀리 끼워 넣은 구성 요소에 얼마나 효과적인지 생각해 보자!SearchWidget의 하위 대상에 값을 제공하기 위해 Search 속성을 통해 데이터를 전달합니다.우리는 이미 두 개의 값을 가진 대상을 구성하고 전달하고 있다.

SearchContext.Provider - 맥주 공장의 대상 수조를 나타낸다

value-results 갈고리setInputValue의 setter 함수, 저장useState의 텍스트 값(즉 Search

SearchInput를 설정하면 inputValue 의 모든 서브어셈블리에서 Provider 를 사용하여 컨텍스트 값을 사용할 수 있습니다.

const context = useContext(SearchContext);

Search 에서는 사용자가 useContext 에서 텍스트를 입력할 때마다 컨텍스트를 통해 전달되는 SearchInput 함수를 사용하여 setInputValue 에서 inputValue 의 상태를 설정합니다.

function handleInputChange(event) {
  context.setInputValue(event.currentTarget.value);
}

<input
  onChange={handleInputChange}
  ref={inputRef}
  type="search"
  className="SearchInput__input"
/>

이 상태를 Search 분량으로 올리면 값 필터링 <input /> 을 사용하여 새 수조 (즉 Search 를 apiResults 분량에 전달할 수 있습니다. 이 분량은 항목마다 results 로 표시됩니다.
본질적으로 SearchResults 우리는 관련 논리를 더욱 쉽게 집중하고 이 자체 포함된 구성 요소 트리에 좋은 데이터 관리 시스템을 만들 수 있다.이론적으로 서로 다른 API 데이터를 사용하고 몇 개의 도구 이름을 업데이트함으로써 우리는 이 작은 부품의 용도를 쉽게 재조정할 수 있다.멋있어!