React에서 사용자 정의, 재사용 가능한 후크 구축

React의 좋은 사용자 정의 후크는 구성 요소를 통해 공유하기위한 상태의 논리를 캡슐화하는 "사용"으로 시작하는 재사용 가능한 기능입니다. 공통 문제를 해결하고, 사용 페치 (URL, 옵션)와 같은 매개 변수를 통해 유연해야하며, 배열 또는 객체와 같은 일관된 구조를 반환하고, useffect의 정리로 안전하게 부작용을 처리하고, 브라우저 글로벌을 확인하여 SSR을 지원하고, UI-Agnostic을 유지합니다. 예를 들어 지속 데이터를위한 USELOCALSTORAGE 및 이벤트 리스너 관리를위한 사용 이벤트 리스너; JSX와 무관하게, 상태 또는 부작용을 관리하고 일반화 될 수 있지만, 조건부로 호출을 호출하거나, JSX를 통과 시키거나, 직접 관리하거나, 직접 UI를 관리하거나, 간단한 유틸리티 기능이 충분할 때, 간단한 유틸리티 기능이 충분할 때 과도하게 복잡 해지는 것을 목표로하는 것을 목표로하고, 조건부 또는 부작용을 관리하고, 상태 또는 부작용을 관리하고, 조건부로 통과하거나, 직접 통과하거나 복잡하게 복제하는 것을 목표로하는 것은 커스텀 후크를 만들어야합니다.

React의 사용자 정의 후크는 구성 요소 로직을 재사용 가능한 기능으로 추출하는 강력한 방법입니다. 데이터 가져 오기, 양식 처리 또는 구독과 같은 상태의 논리를 공유 할 수 있습니다.이를 복제하지 않고 여러 구성 요소를 동행합니다. 효과적이고 재사용 가능한 커스텀 후크를 구축하는 방법은 다음과 같습니다.

좋은 커스텀 훅은 무엇입니까?

사용자 정의 후크는 이름이 use (예 : useForm , useFetch )으로 시작하는 JavaScript 함수 일뿐입니다. useState , useEffect , useCallback 등과 같은 다른 후크를 호출 할 수 있습니다. 키는 캡슐화 입니다. 후크는 내부 복잡성을 숨기고 깨끗하고 직관적 인 API를 노출시켜야합니다.

좋은 커스텀 후크 :

• 일반적인 문제를 해결합니다
• 합성 가능하고 유연합니다
• 특정 UI와 연결되지 않습니다
• 에지 케이스를 우아하게 처리합니다
• 사용하기 쉬운 값과 함수를 반환합니다

예 : useLocalStorage 구축

상태를 localStorage 와 동기화하는 후크를 만들어 봅시다. 이는 사용자 기본 설정, 양식 입력 또는 UI 상태를 지속하는 데 유용합니다.

 'react'에서 {usestate, useeffect} import;

함수 USELOCALSTORAGE (key, InitialValue) {
  const [value, setValue] = usestate (() => {
    노력하다 {
      const item = window.localstorage.getItem (키);
      반품 항목? JSON.PARSE (항목) : InitialValue;
    } catch (오류) {
      console.warn (`오류를 읽는 LocalStorage 키 "$ {key}":`, 오류);
      EnitialValue를 반환합니다.
    }
  });

  useeffect (() => {
    노력하다 {
      window.localstorage.setitem (key, json.stringify (value));
    } catch (오류) {
      console.warn (`오류 설정 LocalStorage 키 "$ {key}":`, 오류);
    }
  }, [키, 값]);

  return [value, setValue];
}

이것이 잘 작동하는 이유 :

• 캡슐화 로직 : 모든 구성 요소에서 로컬 스터리지 검사를 반복 할 필요가 없습니다.
• 핸들 오류 : LocalStorage가 가득 차 있거나 비활성화 된 경우 충돌을 방지합니다.
• 모든 유형과 함께 작동합니다 . JSON.parse/stringify 통한 문자열, 숫자, 객체, 배열을 허용합니다.
• 사용하기 쉬운 :

 함수 darkmodetoggle () {
  const [isdark, setisdark] = uselocalstorage ( 'darkmode', false);

  반품 (
    <버튼 onclick = {() => setisdark (! isdark)}>
      {ISDARK? &#39;light&#39;: &#39;dark&#39;} 모드
    </버튼>
  );
}

재사용 가능한 후크를 작성하기위한 팁

1. 유연성을 위해 매개 변수를 허용합니다

사용자가 인수를 통해 동작을 사용자 정의하도록하십시오.

 usefetch (url, 옵션, 꼭
useform (InitialValues, OnSubmit, Validate)

이렇게하면 후크가 다른 사용 사례에 적응할 수 있습니다.

2. 일관된 구조를 반환하십시오

항상 예측 가능한 방식으로 값을 반환합니다. 일반적으로 배열 (예 : usestate) 또는 객체.

배열 반환 (명명 된 파괴에 적합) :

 const [value, setValue, clear] = useInput ( '');

객체 반환 (많은 값에 대해 더 좋습니다) :

 const {data, loading, error, refetch} = usefetch (url);

수익이 얼마나 많은지에 따라 선택하십시오.

3. 부작용을 안전하게 처리하십시오

메모리 누출을 피하기 위해 useEffect 정리를 사용하십시오.

예 : useEventListener

 함수 useeventListener (이벤트 이름, 핸들러, 요소 = 창) {
  useeffect (() => {
    const target = element.current || 요소;
    target.addeventListener (EventName, Handler);

    return () => target.removeEventListener (EventName, Handler);
  }, [이벤트 이름, 핸들러, 요소]);
}

정리는 구성 요소가 마운트를 마치면 이벤트 리스너가 제거되도록합니다.

4. 지원 SSR (서버 측 렌더링)

SSR 동안 window 또는 localStorage 와 같은 브라우저 글로벌 참조를 피하십시오.

useLocalStorage 점검 개선 :

 if (typeof window === 'undefined') return [initialValue, setValue];

또는 내부에서 수표를 사용하십시오.

 const canusedom = typeof window! == 'undefined';

사용자 정의 후크를 언제 구축해야합니까?

스스로에게 물어보세요 :

• 이 논리는 여러 구성 요소에서 반복됩니까?
• 특정 JSX와 무관합니까?
• 상태 또는 부작용을 관리합니까?
• 일반화 할 수 있습니까?

그렇다면 예 → 사용자 정의 후크를 만듭니다.

일반적인 패턴 :

• useMediaQuery(query) → 반응 형 로직
• useOutsideClick(ref, callback) → 요소 외부의 클릭 감지
• useDebounce(value, delay) → 지연 상태 업데이트
• useScrollPosition() → 트랙 스크롤

커스텀 후크가 없습니다

• ❌ 조건부 후크를 호출하지 마십시오 (후크 규칙을 따르십시오)
• ∎ 어린이 나 JSX를 후크에 전달하지 마십시오 (구성 요소가 아님)
• ❌ UI를 직접 관리하지 마십시오
• ❌ 과도하게 복잡하지 않음 - 때로는 유틸리티 기능으로 충분합니다

커스텀 후크를 구축하는 것은 마크 업이 아닌 동작을 재사용하는 것입니다. 제대로 완료되면 구성 요소를 깨끗하게 만들고 논리를 더욱 테스트 가능하며 앱을 더 쉽게 유지할 수 있습니다.

기본적으로 : useeffect 또는 usestate logic을 복사하고 붙여 넣는 경우, 아마도 사용자 정의 후크를 만들 시간 일 것입니다.

위 내용은 React에서 사용자 정의, 재사용 가능한 후크 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!