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

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

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

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

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

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

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

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