기존 클래스 구성 요소를 포함하는 프로젝트에서 React 갈고리를 사용하는 방법

소개하다.
React 갈고리가 발표되기 전에, 우리는 클래스 구성 요소, 고급 구성 요소, React 생명주기 방법을 사용했다. 이 갈고리들은 정상적으로 작동하고 있지만, 어떤 경우에는 쓰기가 어려울 수도 있다.React에서 이른바 '낡은' 스타일의 코드는 때때로 매우 번거롭고 깨끗하지 않을 뿐만 아니라 관리하기 어렵다.여기가 후크가 구조하러 온 곳이야!
이런 새로운 인코딩 스타일은 많은 개발자들을 가볍게 한다.하지만 등등, 때로는 스위치만 젖히고 갈고리를 사용하는 것이 쉽지 않을 때도 있다.클래스 구성 요소를 기반으로 한 프로젝트가 많습니다. 아직 완성되지 않은 프로젝트도 있습니다.
우리는 이런 것들을 어떻게 처리해야 합니까?우리는 어떻게 이런 안건의 진일보한 발전을 처리합니까?좋아, 내가 여기서 너에게 답을 좀 줄게.

구성 요소 유형
React의 응용 프로그램은 항상 클래스 구성 요소를 사용하여 유상태나 스마트 구성 요소를 실현하고, 기능 구성 요소를 사용하여 무상태나 벙어리 구성 요소를 실현한다.React의 핵심 방법과 속성, 예를 들어 상태, 생명주기 방법과 상태 변경에 기반한 재현은 튼튼한 클래스 구성 요소에서만 사용할 수 있다.이것이 바로 이 유형의 구성 요소들이 주로 프로젝트 내부에 사용되는 이유입니다.이 구성 요소들은 React의 마력을 발휘하여 도서관에서 제공하는 모든 상품을 사용하는 올바른 방식이다.
그 밖에 구조적으로 말하자면 밑바닥에서 기능 구성 요소를 사용했다.이것은 단지 마지막 차원화된 부분, 즉 시도층 자체를 의미하며 주로 기능 구성 요소이다.이것은 응용 프로그램의 일부분으로 상태를 필요로 하지 않는다. 왜냐하면 부모로부터 데이터를 얻고 요소를 클라이언트에게 보여주기 때문이다.
클래스 기반 어셈블리는 일반적으로 HOC 또는 고급 어셈블리와 함께 사용됩니다.HOCs는 구성 요소를 매개 변수로 하고 업그레이드된 구성 요소(상태가 있거나 없을 수 있음)를 반환하는 함수를 나타냅니다.클래스 구성 요소를 외부 패키지(예: React Router 및 Redux)에 연결하는 모드입니다.이것은 클래스를 연결된 함수 구성 요소로 바꾸는 요소 중 하나이기 때문에 이 점을 기억하십시오.

갈고리
한편, 새로 제시된 React 인코딩 방법은 갈고리를 사용하는 것이다.연결고리는 React에 연결하는 방법을 대표하고 React가 기능 구성 요소에서 제공하는 모든 중요한 기능에 대한 접근을 제공합니다.갈고리가 상태를 사용할 수 있도록 하기 때문에 함수 구성 요소는 더 이상 무상태 구성 요소로 명명되지 않습니다.갈고리로 코드를 작성하면 많은 것들이 더욱 쉽게 실현될 수 있다.그것은 코드를 더욱 깨끗하고 건조하며, 다시 사용할 수 있고, 더욱 간단하고, 사용하기 쉽게 한다. 유지보수, 업그레이드, 새로운 기능을 추가하는 데 특히 그렇다.한 마디로 하면, React 갈고리는 반드시 작성해야 하는 코드의 양을 크게 감소시켰다.
갈고리의 또 다른 중요한 점은 갈고리는 클래스를 바탕으로 하는 구성 요소에서 사용할 수 없다는 것이다.이미 리액트 방법을 사용하는 방법이 있었기 때문이야... 하지만 함정이 있었어.HOC는 클래스 기반 구성 요소에 갈고리 기능을 제공하는 데 사용할 수 있습니다.HOC는 사실상 함수이기 때문에 모든 갈고리를 사용할 수 있으며, 이 갈고리들은 클래스 기반 구성 요소에 데이터를 제공하고 도구로 전달할 수 있다.
다음은 다음과 같은 예입니다.

const authStateHOC = (WrappedComponent) => {  
  const initialState = createContext({  
  authState: {  
  email: "",  
  password: "",  
 },
 });  

const authStateContext = useContext(initialState);  

return (  
  <WrappedComponent  
   {...props}  
   value={authStateContext.value}  
   setValue={authStateContext.setValue}  
  />  
  );  
};

예, 구성 요소는 클래스 기반 구성 요소에서 갈고리를 사용할 수 있도록 실제적으로 HOC 모드를 사용하여 조정할 수 있습니다.그러나 이것은 건의가 아니다. 왜냐하면 HOC 모델은 개발자들이 멀리하고 있는 것이기 때문이다.HOC가 해결하는 난제, 예를 들면 논리를 중용하는 것이 현재 모두 연결되어 있다.가장 중요한 것은 이런 패턴을 사용하면 결국 순환하는 지옥에서 잃어버릴 수도 있다는 것이다.

그러면 해결 방안은 무엇일까요?
React 문서에서는 클래스 기반 구성 요소가 최신 버전에서 사용되지 않도록 하는 것이 좋습니다.갈고리가 미래의 발전 방향으로 여겨지기 때문에 클래스 구성 요소를 다시 작성하는 것도 권장하지 않는다.새로운 훅 문법은 더 개발해야 한다는 지적이 나온다.왜?클래스를 기반으로 하는 구성 요소가 실현할 수 있는 모든 것은 현재 갈고리를 사용하여 실현할 수 있고, 방식은 훨씬 간단하기 때문이다.
그렇다면, 우리는 클래스 구성 요소를 어떻게 처리해야 합니까?재구성은 선택일 수 있지만, 클래스에 대한 지원은 아무런 진전이 없기 때문에 강제적인 것은 아니다.또한 우리가 시간 소모와/또는 프로젝트의 재무 상황을 고려하면 그것은 최종적으로 매우 비싸게 될 수 있다.만약 프로젝트 규모가 매우 크다면, 이 점은 특히 정확하다.
갈고리를 사용하기 위해 프로그램을 다시 쓰는 것은 신기할 수도 있지만, 비용을 대가로 하는 것이 사실이다. 경시해서는 안 된다.만약 당신이 최종적으로 재구성 방법을 선택했다면, 코드를 다시 쓰는 데 필요한 모든 것을 고려하여 갈고리를 사용할 수 있도록 하세요. 예를 들어, 얼마나 걸리거나, 얼마나 많은 사람이 그것을 처리해야 하는지.
두 번째 방법은 함수 구성 요소와 연결을 사용하여 모든 새 코드를 작성하는 것이다.당신이 사용 클래스의 낡은 환경에서 일하는 것을 보았을 때 갈고리를 사용하기 위해 하나 또는 몇 개의 구성 요소를 재구성해 보세요.이전에 사용한 클래스의 특정 기능을 되돌려 주거나 수정할 때마다 갈고리로 다시 쓰십시오.이 방법은 느리지만 확실하게 코드 라이브러리를 개선하고, 더욱 간단하고, 유지보수하기 쉽도록 할 것입니다.
상당히 많은 창고가 현재 갈고리에 대한 지원을 제공했다.예를 들어 앞에서 언급한 React 공유기와 Redux(React에서 가장 유행하는 패키지 중 하나)가 그것을 지원한다.거의 모든 React 애플리케이션에서 사용됩니다.항목이 용기 모드 (예를 들어 HOC가 있는 용기 모드) 를 사용한다면, 연결에 더 쉽게 사용할 수 있음을 나타낸다.useDispatch,useSelector 등 연결도 제공한다.useHistory,useParams,useLocations 갈고리를 사용하면 공유기에 더욱 편리하게 접근할 수 있습니다.
갈고리는 하나의 종류의 구성 요소가 할 수 있는 모든 것을 할 수 있다. 갈고리의 재사용 가능하고 깨끗하며 간소화된 기능은 그것들을 작업 흐름에 실현시키는 또 다른 원인일 뿐이다.

결론
갈고리와 클래스 구성 요소의 이야기를 총결해 보도록 하겠습니다.
많은 범례와 모델이 점점 더 함수식 프로그래밍으로 발전하고 있다.지금까지 함수식 프로그래밍은 개발자가 대상을 대상으로 하는 프로그래밍 모델을 사용할 때 직면하는 문제를 해결하거나 간소화시켰다. 예를 들어 코드의 난해함이나 습한 상태에서 방향을 잃는 것이다.
함수식 프로그래밍을 통해 개발자는 정확한 실현과 문제 해결 등 더 많은 중요한 프로젝트에 관심을 가질 수 있다.또한 응용 프로그램을 재구성하는 것은 강제적인 과정이 아니므로 팀과 프로젝트 자체에 가장 유리한 것이 무엇인지 항상 고려해야 한다는 것을 기억하십시오.