반응 후크 : 깊은 컷

Hooks are reusable functions that allow you to use state and other functions (such as lifecycle methods, etc.) without writing classes. Hook 함수를 통해 기능 구성 요소를 사용하여 React 상태 수명주기를 "고리"할 수 있으므로 기능 구성 요소의 상태를 클래스 구성 요소로 변환하지 않고 조작 할 수 있습니다.

반응 버전 16.8에서 도입 된 후크를 반응했으며 그 이후로 더 많은 후크를 추가했습니다. 일부 후크는 useeffect , usestate 및 usecontext 와 같은 다른 후크보다 더 일반적으로 사용되며 인기가 있습니다. REACT를 사용하는 경우이 후크를 사용해야한다고 생각합니다.

그러나 내가 관심있는 것은 거의 알려지지 않은 반응 후크입니다. 모든 반응 후크에는 고유 한 기능이 있지만, 일상적인 일에 나타나지 않을 수도 있거나, 아마도 그들이 당신에게 여분의 초강대국을주는 것을 알고 있기 때문에 5 개의 후크를 보여 드리고 싶습니다.

카탈로그

• usereducer
• useref
• useimperative handle
• usememo>
• H3> usereducer

  usereducer 후크는 다른 후크와 유사한 상태 관리 도구입니다. 구체적으로, 그것은 usestate 후크의 대안입니다.

  usereducer 후크를 사용하여 둘 이상의 상태 (또는 조치)를 변경하는 경우 별도로 작동 할 필요가 없습니다. 후크는 모든 상태를 추적하고 총체적으로 관리합니다. 다시 말해, 그것은 상태 변화를 관리하고 다시 렌더링합니다. usestate hook와 달리 usereducer 는 복잡한 프로젝트에서 많은 주를 다룰 때 더 쉽습니다.

  사용 시나리오

  usereducer 는 여러 상태를 처리하는 복잡성을 줄이는 데 도움이 될 수 있습니다. 국가 관리 및 구성 요소의 논리를 별도의 문제로 처리 할 수 ​​있기 때문에 여러 상태를 집단적으로 추적해야 할 때 사용할 수 있습니다.

  syntax

  usereducer 는 세 가지 매개 변수를 허용합니다. 그 중 하나는

  • expler 기능
  • 초기 스테이트
  • init 기능 (옵션)
  const, retsation (retsation) UCER (reconder, InitialState, Initfunction) // 선택적 세 번째 매개 변수를 사용한 초기화

  예

  다음 예제는 텍스트 입력, 카운터 및 버튼이 포함 된 인터페이스입니다. 각 요소와 상호 작용하면 상태가 업데이트됩니다. usereducer 를 사용하면 별도로 설정하지 않고 한 번에 여러 사례를 정의 할 수 있습니다.

  dispatch ({type : 'user_input', 페이로드 : e.target.value})}/& gt;
  
  

  {state.count}

  dispatch ({retment '})} '}) & gt;
  

  {state.userinput}

  )

  위의 코드에서 (Code)에서 쉽게 관리 할 수 ​​있습니다. 이것은 여러 상태가있는 복잡한 응용 프로그램에서 작업 할 때 제공하는 힘입니다.

  useref

  useref 후크는 요소에 대한 참조를 만들기 위해 DOM에 액세스하는 데 사용됩니다. 그러나 그뿐만 아니라 .current 속성으로 객체를 반환하며, 이는 구성 요소의 수명 내내 사용할 수 있으며 재 렌더링을 유발하지 않고 데이터를 지속 할 수 있습니다. 따라서 useref 값은 렌즈를 업데이트하는 것이 변경되지 않습니다.

  사용 시나리오

  원하는 경우 :

  • 저장된 변수 정보로 DOM을 조작하십시오.
  • 아동 구성 요소의 정보 액세스 (Necked Elements).
  • 요소에 초점을 맞추십시오.

  useref 후크를 사용할 수 있습니다. 재 렌더링을 유발하지 않고 응용 프로그램에 가변 데이터를 저장할 때 가장 유용합니다.

  구문

  useref 는 하나의 매개 변수, 즉 초기 값 만 허용합니다.

  const newRefComponent = useref (initialValue);

  예

  여기서 useref 및 hook를 사용하여 응용 프로그램이 텍스트 입력에 유형으로 업데이트 상태를 다시 렌더링하는 횟수를 보여주었습니다.

   app.css 'function app. } const foccrandominput = () = & gt; {if (randominput.current) {// 무작위 참조 오류를 방지하기 위해 판단을 추가하십시오. randominput.current.focus ()} return (<div classname="app"> <h3> 렌더의 양 : {showrender.current} </h3> );} 내보내기 기본 앱;  <p> 텍스트 필드에서 각 문자를 입력하면 응용 프로그램의 상태가 업데이트되지만 전체 재 렌더를 트리거하지는 않습니다. </p> <h3> <code> useimperative handle </code> </h3> <p> 아동 구성 요소가 부모 구성 요소에서 전달 된 기능에 어떻게 액세스하는지 알고 있습니까? 부모 구성 요소는 이러한 기능을 소품을 통해 전달하지만, 이러한 종류의 패스는 부모 구성 요소가 하위 구성 요소에서 함수를 호출 할 수 없기 때문에 "일방적"이라는 의미입니다. </p> <p> 그런 다음, <code> useimperative handle </code>는 부모 구성 요소가 어린이의 기능에 액세스 할 수 있도록합니다. </p> <p> 이것은 어떻게 작동합니까? </p> <ul> <li> 아동 구성 요소의 함수를 정의합니다. </li> <li> 부모 구성 요소에 심판을 추가하십시오. </li> <li> 우리는 <code> forwardref </code>를 사용하여 정의 된 Ref를 어린이 구성 요소로 전달할 수 있습니다. </li> <li> <code> useimperative handle </code> ref. </li> </ul> <h4> 사용 시나리오 </h4> <p> <code> useimperative handle </code> 아동 구성 요소의 변화에 ​​영향을 받기를 원할 때 잘 작동합니다. 따라서 초점 변화, 증가 및 감소 및 흐릿한 요소와 같은 사례는 부모 구성 요소를 그에 따라 업데이트하기 위해이 후크를 사용해야하는 경우 일 수 있습니다. </p> <h4> 구문 </h4> <fre> useimperativeHandle (ref, createHandle, [종속성])  <h4> 예 </h4> <p>이 예에는 부모 구성 요소와 하위 구성 요소에 두 개의 버튼이 있습니다. 부모 버튼을 클릭하면 자식 구성 요소에서 데이터를 검색하여 부모 구성 요소를 조작 할 수 있습니다. 자식 버튼을 클릭하면 부모 구성 요소에서 자식 구성 요소로 아무것도 전달하지 않아서 내용을 반대 방향으로 전달하는 방법을 설명하는 데 도움이됩니다. </p> <fer> // "react"에서 {useref}; int ();}}} & gt; 부모 박스  <childcomponent ref="{controlRef}"></childcomponent> </fer></fre>
  </div>);} 기본적으로 부모 통신; {setprint (! print)); Box ; > 가장 일반적으로 사용되지만 흥미로운 반응 후크 중 하나입니다. 성능을 향상시키고 대기 시간, 특히 응용 프로그램의 대규모 컴퓨팅에서 대기 시간을 줄입니다. 어떻게 이런 일이 일어날 수 있습니까? <code> usememo </code> 후크는 구성 요소의 상태가 업데이트되고 구성 요소가 다시 렌더링 될 때마다 값을 재 계산하는 것을 방지합니다.  <p> 함수가 상태 변경에 응답하는 것을 볼 수 있습니다. <code> usememo </code> hook는 함수를 받아들이고 <strong> 함수의 반환 값을 반환합니다 </strong>. 추가 작업이 다시 렌더링하는 데 소비되는 것을 방지하기 위해 값을 캐시 한 다음 종속성 중 하나가 변경 될 때 반환합니다. </p> <p>이 프로세스는 <strong> Memorization </strong>라고 불리며, 이는 이전에 요청 된 값을 기억하여 성능을 향상 시켜서 이러한 모든 계산을 반복하지 않고 다시 사용할 수 있습니다. </p> <h4> 사용 시나리오 </h4> <p> 최상의 사용 사례는 값을 저장하고 후속 상태 변경에 사용하려는 많은 계산을 처리 할 때마다입니다. 성능 향상을 야기 할 수 있지만 과도하게 사용하면 반대의 효과가있어 응용 프로그램의 메모리를 차지할 수 있습니다. </p> <h4> 구문 </h4> <fre> usememo (() = & gt; {// code}, []) </fre>

  예

  버튼을 클릭하면 숫자가 짝수지 또는 값을 값을 나타냅니다. 나는 계산 능력을 높이기 위해 많은 0을 루프에 추가했습니다. 값을 몇 초 만에 반환하고 usememo hook로 인해 여전히 잘 작동합니다.

  // usememo.js import react, {usestate, usememo} 'react'memo () {const [memoone, setmemoone] = usestate (0); t; SquaredNumber = usememo (() = & gt; {let i = 0; >

  {Iseven ':'no '}

  제곱 번호 : {squarednumber}

  ; ES와 기능 자체를 반환합니다.

  Usecallback

  hook는 또 다른 흥미로운 후크이며 이전 섹션은 그 기능의 스포일러입니다.

  방금 보았 듯이 usecallback 는 usememo 후크와 유사하게 작동합니다. 모두 메모리를 사용하여 나중에 사용하기 위해 특정 컨텐츠를 캐시합니다. usememo 는 기능의 계산을 캐시 된 값으로 저장하는 반면 usecallback 기능을 저장하고 반환합니다.

  사용 시나리오

  usememo>, <code> usecallback 는 기억에 남는 콜백을 저장하고 반복하지 않고 의존성을 저장하고 반환하기 때문에 우수한 성능 최적화입니다.

  구문

  const getMemoizedCallback = usecallback (() = & gt; {dosomething ()}, []);

  예

   infecall, useState} Allback-Child "; import"./app.css "내보내기 기본 기능 app () {const [토글, settoggle] = usestate (false); const [data, setData] = "USECALLBACK 덕분에 모든 렌더링에서 변경되지 않는 데이터입니다"); le & amp; & amp; <returnfunction></returnfunction> }  <p> // inmplice {useeffect} "react}) {useeffect () {return > {returnFunction ( "hook!")} </p>} export default callbackchild; 

  출력

  ... (샘플 출력에 대한 샘플 또는 설명이 여기에 포함되어야합니다)

  요약

  그게 다야! 우리는 방금 종종 간과 된 5 가지 매우 편리한 반응 후크를 보았습니다. 그러한 많은 리뷰와 마찬가지로, 우리는이 후크의 표면을 만지고 있습니다. 그들은 각각 고유 한 미묘함과 예방 조치를 가지고 있으며 사용할 때 고려해야합니다. 그러나 바라건대 당신은 그들이 무엇인지에 대한 좋은 고급 개념을 가지고 있으며 다른 후크보다 더 적합한시기를 더 자주 사용할 수 있습니다.

  그것들을 완전히 이해하는 가장 좋은 방법은 연습입니다. 따라서 앱 에서이 후크를 사용하여 더 잘 이해하는 것이 좋습니다. 이렇게하려면 다음 자료를 살펴보면 다음과 같은 자료를 살펴볼 수 있습니다.

  - 반응 고리 (Kingsley Silas) - 한눈에 훅스 (반응 문서) - 훅스 치트 시트 (Ohans Emmanuel) - 반응 라이프 사이클 (Kingsley Silas)의 Circt of React Rect (Agny wort) (AGNEY) - agney witht with on with with with rect. Kingsley Silas)

위 내용은 반응 후크 : 깊은 컷의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!