usereducer React Hook에 대해 알아보십시오

React 16.7.0에 도입 된 React의 useReducer Hook는 복잡한 응용 프로그램 상태를 관리하는 강력한 방법을 제공합니다. 감속기 함수와 초기 상태가 필요하며 현재 상태와 디스패치 함수를 반환합니다. 이것은 useState 와 대조적이며, 이는 더 간단한 상태 관리에 더 적합합니다.

useReducer 의 핵심은 JavaScript의 reduce 방법을 미러링하는 감속기 기능입니다. 리더러는 항상 단일 값 (숫자, 문자열, 배열 또는 객체)을 반환하여 단일 출력으로 다중 입력을 "감소"합니다. 따라서 논리를 여러 값에 적용하고 통합 결과를 생성하는 데 이상적입니다.

예를 들어, 숫자 배열을 합산하는 것을 고려하십시오.

 const 번호 = [1, 2, 3];
const reder = (Tally, number) => 탈리 번호;
const total = numbers.reduce (excer, 0); // 총은 6입니다

useReducer 이 개념을 주 경영진으로 확장합니다.

 const [state, dispatch] = usereducer (expler, initialstate, init);

여기에서는 initialState 초기 응용 프로그램 상태를 설정합니다. 옵션 init 함수는 초기 상태를 게으르게 계산하며, 초기 값이 다른 요인에 의존 할 때 유용합니다. 후크는 현재 state 와 dispatch 함수를 반환하여 상태를 업데이트합니다.

예를 들어, 자동차 커스터마이저를 만들어 봅시다 :

먼저 초기 상태를 정의하십시오.

 const initialstate = {
  추가 가격 : 0,
  자동차: {
    가격 : 26395,
    이름 : "2019 포드 머스탱",
    이미지 : "https://cdn.motor1.com/images/mgl/0an2v/s1/2019-ford-mustang-bullitt.jpg",
    특징: []
  },
  가게: [
    // ... (사용 가능한 기능 목록) ...
  ]]
};

다음으로 기능 추가 및 제거 기능을 처리 할 레이서 기능을 만듭니다.

 const reder = (state, action) => {
  스위치 (action.type) {
    "add_feature"사례 :
      // ... (기능 및 업데이트 가격을 추가하는 논리) ...
      부서지다;
    사례 "remove_feature":
      // ... (기능을 제거하고 가격을 업데이트하는 논리) ... ...
      부서지다;
    기본:
      반환 상태;
  }
};

그런 다음 앱 구성 요소는 useReducer 사용하여 사용자 상호 작용을 기반으로 상태를 관리하고 작업을 발송합니다.

useState 보다 useReducer 선택할 때? 상태 전환이 복잡 할 때 또는 한 상태 요소가 다른 상태 요소에 의존 할 때 useReducer 빛납니다. 더 간단한 상태의 경우, useState 충분합니다. useReducer Redux와 유사한 기능을 달성 할 수 있지만 Redux는 매우 큰 응용 프로그램에 필요한 미들웨어 및 시간 여행 디버깅과 같은 추가 기능을 제공합니다. 그러나 많은 프로젝트의 경우 useReducer 복잡한 상태를 관리하기위한보다 가볍고 효율적인 솔루션을 제공합니다.

위 내용은 usereducer React Hook에 대해 알아보십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!