맥락.Context에 의해 전달된 값에 액세스하기 위한 Consumer vs useContext().프로바이더

맥락.Context에 의해 전달된 값에 액세스하기 위한 Consumer vs useContext().프로바이더

<MyContext.Consumer>
    {value => { }}
</MyContext.Consumer>

VS

let value = useContext(MyContext);

콘텍스트를 사용한 이 두 스니펫의 차이점은 무엇입니까?콘텍스트 공급자가 전달한 값에 액세스하기 위해 useContext 훅을 사용하는 사용자.콘텍스트를 인수로 전달했기 때문에 useContext는 콘텍스트 프로바이더에 서브스크라이브를 하기 때문에 프로바이더 값이 변경되었을 때 리렌더가 트리거됩니다.

그것이 맞아요.그들은 기본적으로 같은 일을 할 것이다.

제 생각에는useContext훅의 구문은 훨씬 멋지고 가독성이 있습니다.

React Docs에서:

https://reactjs.org/docs/hooks-reference.html#usecontext

use Context

const 값 = useContext(MyContext);컨텍스트 개체(React.createContext에서 반환된 값)를 수락하고 해당 컨텍스트의 현재 컨텍스트 값을 반환합니다.현재 컨텍스트 값은 가장 가까운 <MyContext>의 값 프로포트에 의해 결정됩니다.[ Provider ](프로바이더)가 트리의 발신 컴포넌트 위에 표시됩니다.

가장 가까운 <MyContext>의 경우.Provider > 컴포넌트 업데이트 위에서는 이 Hook이 MyContext 공급자에게 전달된 최신 컨텍스트 값을 사용하여 렌더링을 트리거합니다.

또한 React Docs:

https://reactjs.org/docs/context.html

맥락.컨슈머

<MyContext.Consumer>
 {value => /* render something based on the context value */}
</MyContext.Consumer>

컨텍스트 변경에 가입하는 React 컴포넌트.이를 통해 함수 구성 요소 내의 컨텍스트를 구독할 수 있습니다.

갱신:

송신원: http://brianyang.com/react-hooks-a-deeper-dive-featuring-usecontext-and-usereducer/

송신원: https://testdriven.io/blog/react-hooks-advanced/

새로운useContext콘텍스트를 소비하는 후크는 콘텍스트를 둘러싼 개념을 변경하지 않기 때문에 위의 급락이 발생합니다.이 콘텍스트 훅은 콘텍스트를 소비하는 더 예쁜 방법을 제공할 뿐입니다.멀티 콘텍스트를 소비하는 컴포넌트에 적용할 때 매우 유용합니다.

언급URL : https://stackoverflow.com/questions/56816374/context-consumer-vs-usecontext-to-access-values-passed-by-context-provider