Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on Ago 2, 2019

react context 예제

반응 컨텍스트를 응용 프로그램 :1에 설정하는 두 가지 주요 단계가 있습니다. 컨텍스트 공급자를 설정하고 저장할 데이터를 정의합니다2. 컨텍스트를 사용하여 저장소의 데이터가 필요한 경우 컨텍스트 를 사용하여 컨텍스트를 사용하여 중간 요소를 통해 소품을 전달하지 않도록 할 수 있습니다: 일부 소품을 여러 수준으로 전달하지 않으려면 구성 요소 구성 요소는 컨텍스트보다 더 간단한 솔루션인 경우가 많습니다. . GreetContext.js 가져오기 “반응”에서 반응; const { 공급자, 소비자 } = React.createContext(); 내보내기 { 공급자, 소비자 }; 모든 컨텍스트 개체에는 사용 구성 요소를 컨텍스트 변경 내용을 구독할 수 있는 공급자 React 구성 요소가 함께 제공됩니다. 클래스의 contextType 속성은 React.createContext()에 의해 생성된 컨텍스트 개체를 할할 수 있습니다. 이렇게 하면 this.context를 사용하여 해당 컨텍스트 형식의 가장 가까운 현재 값을 사용할 수 있습니다. 렌더 함수를 포함한 모든 수명 주기 메서드에서 이 것을 참조할 수 있습니다. 매우 기본적인 앱에서 작업하지 않는 한 React Context에서 제공되는 데이터를 업데이트/변경할 수 있는 방법이 필요합니다. 최소한의 예는 데이터에서 숫자를 증가 시키는 단추일 수 있습니다. React의 컨텍스트를 사용하면 중앙 위치에 저장하고 요청하는 모든 구성 요소에 대한 액세스를 허용하여 모든 구성 요소에 정보를 공유할 수 있습니다(일반적으로 소품을 통해 부모에서 자식으로만 데이터를 전달할 수 있음). 다시 한 번 동일한 공유 컨텍스트 소비자를 가져오고, 렌더링 하 고 자식 접근으로 함수를 사용 합니다. 이번에는 인사와 설정 모두를 취합니다우리의 컨텍스트 값에서 인사.

실험 컨텍스트 API와 함께 이전에 제공된 반응입니다. 이전 API는 모든 16.x 릴리스에서 지원되지만 이를 사용하는 응용 프로그램은 새 버전으로 마이그레이션해야 합니다. 레거시 API는 향후 주요 React 버전에서 제거됩니다. 여기에서 레거시 컨텍스트 문서를 읽어보십시오. Redux와 MobX는 항상 무대 뒤에서 맥락을 사용했습니다. 익숙하고, 바로 사용할 수 있으며, 워크플로를 변경할 필요가 없습니다. Congratz, 당신은 효과적으로 반응 컨텍스트를 사용하고 있습니다. 그런 다음 공급자 구성 요소를 반환하는 래퍼 구성 요소를 만들고 컨텍스트에 액세스하려는 모든 요소를 자식으로 추가합니다. 예를 들어 보겠습니다.

화요일에 릴리스된 React의 버전 16.6에서는 컨텍스트를 보다 간단하게 사용할 수 있도록 클래스 속성 컨텍스트Type이 추가되었습니다. 자식 구성 요소에서 먼저 컨텍스트 개체를 가져옵니다. 또한 렌더 메서드 외부에서 컨텍스트 값에 액세스할 수 없는 문제를 해결할 수도 있습니다. 그것은 사실이다, 당신은 할 수 없습니다, 그리고 당신이 자식 구성 요소에 전달하고 거기에 사용하는 이유입니다. 컨텍스트 API가 응용 프로그램의 모든 부분에 사용되는 것은 아니며 React 구성 요소 트리에서 데이터를 공유하는 데 사용됩니다. 반응 문서에서 : VID 주셔서 감사합니다, 그것은 매우 도움이되었다. 그냥 궁금해, 왜 규칙을 따라 컨텍스트 공급자에서 최상위 소품으로 상태 및 클래스 메서드를 보내? 소품 ={같은 것… 이.상태, func1, func2}. 그런 다음 소비자의 일반 소품과 동일한 방식으로 소비 할 수 있습니다. 먼저 src/count-context.js에서 파일을 만들고 컨텍스트를 만듭니다.

이것은 의도적입니다. 컨텍스트 값을 제공하는 한 가지 방법과 컨텍스트 값을 사용하는 한 가지 방법만 노출합니다. 이를 통해 사람들이 컨텍스트 값을 원하는 방식으로 사용할 수 있으며 소비자에게 유용한 유틸리티를 제공할 수 있습니다.

Centro per un Futuro Sostenibile via Tacito, 84 00193 Roma tel. +39 06 90288228