> 웹 프론트엔드 > JS 튜토리얼 > 남용을 중지하세요 React Context API

남용을 중지하세요 React Context API

WBOY
풀어 주다: 2024-08-14 12:46:31
원래의
1213명이 탐색했습니다.

Stop abuse React Context API

저는 며칠 전 새로운 부서로 적응하게 되었습니다. 새로운 동료가 기존 React 프로젝트를 리팩토링하는 작업을 나에게 맡겼습니다.

코드를 읽다가 Context API를 사용하는 방식에 충격을 받았습니다. 모든 것(예, 거의 모든 것)을 Context 객체에 넣은 이전의 코더는 이를 모든 상태와 일부 로컬 임시 상태를 관리하는 저장소로 취급했습니다. 그건 미친 짓이야!

또한 그는 하나의 .ts 파일에 있는 단 하나(예, 단 하나의 구성 요소)의 페이지에 대한 모든 내용을 코딩합니다. 코드의 논리에 대해 내 마음 속에 명확하게 설명하는 것은 나에게 너무 어렵습니다. 하지만 나는 여전히 이 형편없는 코드를 받아들이고(선택의 여지가 없습니다) 큰 결정을 내립니다. 일주일 안에 이 모든 페이지를 Mobx로 다시 작성하고 코드를 여러 기능 구성 요소로 분할하겠습니다.

저는 Mobx를 사용하여 API의 모든 데이터를 처리하고 하나의 거대한 구성 요소를 여러 개의 작은 조각으로 분할하기 위해 여러 저장소를 만듭니다. 모든 것이 명확하고 단순해지기 시작합니다. 로컬 상태는 사용될 범위 내에 있어야 하며, 공통 부분은 Mobx 저장소에서 가져옵니다.

드디어 Context 개체를 완전히 제거하고 수천 줄의 코드가 제거되었으며 세상은 다시 조용해졌습니다!

Context API에 대해 말씀드리고 싶습니다. 전체 앱에 공유할 전역 구성 정보와 같은 무언가가 실제로 있는 경우 Context API를 사용할 수 있습니다. 그러나 일부 타사 상태 관리 라이브러리를 사용하지 않으려면 컨텍스트를 다음과 같이 처리하는 것은 좋지 않습니다. 대사.

컨텍스트를 컨텍스트로 두고 상태를 Mobx와 같은 라이브러리에서 관리하도록 하세요.

React Context API 남용을 중단해주세요!

위 내용은 남용을 중지하세요 React Context API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿