React hooks의 장단점 상세 정보

앞말

Hook은 React 16.8의 새로운 기능입니다.그것은 완전히 선택할 수 있고 100% 뒤로 호환된다.이것은 함수 구성 요소를 사용하는 방식으로 클래스 구성 요소와react의 다른 일부 특성을 활용할 수 있다. 예를 들어 관리 상태, 생명주기 갈고리 등이다.개념적으로 말하자면, React 구성 요소는 줄곧 함수와 같다.Hook은 함수를 안고 React의 정신적 원칙을 희생하지 않았다.

장점:

1. 코드의 가독성이 더욱 강하고 원래 같은 기능의 코드 논리는 서로 다른 생명주기 함수에 분리되어 개발자로 하여금 유지보수와 교체에 불리하게 하기 쉽다. React Hooks를 통해 기능 코드를 집합하여 읽기와 유지보수를 편리하게 할 수 있다.예를 들어 모든 생명 주기에는 종종 상관없는 논리가 포함되어 있다.일반적으로 우리는componentDidMount와componentDidUpdate에서 데이터를 얻습니다.단, 같은componentDidMount에도 이벤트 감청을 설정하고, 이후componentWillUnmount에서 제거해야 하는 다른 논리가 많이 포함될 수 있습니다.서로 관련되고 대조적으로 수정해야 할 코드는 분리되었지만, 전혀 관련되지 않은 코드는 같은 방법에서 조합되었다.이렇게 하면 버그가 생기기 쉽고 논리가 일치하지 않게 된다.
2. 어셈블리 트리 레벨이 얕아집니다.원래의 코드에서 우리는 자주 HOC/renderprops 등 방식으로 구성 요소의 상태를 복용하고 기능을 강화하는 등 구성 요소 트리의 층수와 렌더링을 증가시켰다. React DevTools에서 React 응용을 관찰한 결과providers,consumers, 고급 구성 요소,renderprops 등 다른 추상적인 층으로 구성된 구성 요소가'중첩지옥'을 형성할 수 있음을 발견할 수 있다.React Hooks에서는 강력한 사용자 정의 Hooks를 통해 이러한 기능을 실현할 수 있다.
3. this의 지향 문제를 더 이상 고려할 필요가 없다.클래스 구성 요소에서, 자바스크립트에서this의 작업 방식을 이해해야 합니다.

단점:

1. 응답식 useEffect

함수 구성 요소를 쓸 때, 너는 어쩔 수 없이 몇 가지 쓰기 습관을 바꾸어야 한다.코드에서useEffect와useCallback의'의존항수조'의 변경 시기를 잘 알아야 합니다.때때로 당신의useEffect는 어떤 함수의 불가변성에 의존하고 이 함수의 불가변성은 다른 함수의 불가변성에 의존하여 하나의 의존체인을 형성합니다.일단 이 의존 체인의 어떤 노드가 의외로 바뀌면 당신의useEffect는 의외로 촉발됩니다. 만약에useEffect가 멱등의 조작이라면 성능 차원의 문제를 가져올 수 있습니다. 만약에 비멱등이라면 큰일입니다.
따라서componentDidmount와componentDidUpdate에 비해useEffect가 가져오는 심지 부담이 더 크다.

2. 상태가 동기화되지 않음

함수의 운행은 독립적이며, 모든 함수는 독립된 작용역을 가지고 있다.함수의 변수는 실행할 때의 작용역에 저장됩니다. 우리가 비동기적인 조작을 할 때 비동기적인 변수 인용이 이전의 것, 즉 낡은 것을 자주 만날 수 있습니다. (여기도 폐쇄로 이해할 수 있습니다.)예:

import React, { useState } from "react";
​
const Counter = () => {
  const [counter, setCounter] = useState(0);
​
  const onAlertButtonClick = () => {
    setTimeout(() => {
      alert("Value: " + counter);
    }, 3000);
  };
​
  return (
    <div>
      <p>You clicked {counter} times.</p>
      <button onClick={() => setCounter(counter + 1)}>Click me</button>
      <button onClick={onAlertButtonClick}>
        Show me the value in 3 seconds
      </button>
    </div>
  );
};
​
export default Counter;

Show me the value in 3 seconds를 눌렀을 때, 이어서 Click me를 누르면counter의 값이 0에서 1로 바뀝니다.3초 후, 타이머가 촉발하지만,alert는 0(옛값)이 나오지만, 우리가 원하는 결과는 현재의 상태 1이다.
이 문제는classcomponent에서 나타나지 않습니다. 왜냐하면classcomponent의 속성과 방법은 하나의 instance에 저장되어 있기 때문입니다. 호출 방식은:this.state.xxx와this.method().매번 변하지 않는 instance에서 값을 얻기 때문에 인용이 없는 것은 낡은 문제입니다.
사실 이 훅스 문제를 해결하는 데는 클래스의 instance도 참조할 수 있다.useRef에서 되돌아오는 immutable RefObject (current 속성은 가변적) 로 state를 저장한 다음 값을 얻는 방식은counter에서 counterRef로 바뀌었다.current.다음과 같습니다.

import React, { useState, useRef, useEffect } from "react";
​
const Counter = () => {
  const [counter, setCounter] = useState(0);
  const counterRef = useRef(counter);
​
  const onAlertButtonClick = () => {
    setTimeout(() => {
      alert("Value: " + counterRef.current);
    }, 3000);
  };
​
  useEffect(() => {
    counterRef.current = counter;
  });
​
  return (
    <div>
      <p>You clicked {counter} times.</p>
      <button onClick={() => setCounter(counter + 1)}>Click me</button>
      <button onClick={onAlertButtonClick}>
        Show me the value in 3 seconds
      </button>
    </div>
  );
};
​
export default Counter;

결과적으로 우리가 기대하는,alert는 현재의 값 1이다.

어떻게 react hooks의 흔한 문제를 피할 수 있습니까

use Effect에 의존항을 너무 많이 쓰지 말고 이 의존항을 여러 개의 단일 기능의 use Effect로 구분하세요.사실 이 점은 소프트웨어 디자인의'단일 직책 모델'을 따랐다..

만약 상태가 동기화되지 않는 문제에 부딪히면 수동으로 매개 변수를 함수에 전달하는 것을 고려할 수 있다.예:

   // showCount count  
   const [count,setCount] = useState(xxx); 
   function showCount(){ console.log(count) } 

   // showCount count  
   const [count,setCount] = useState(xxx); 
   function showCount(c){ console.log(c) }

그러나 이것도 일부 문제만 해결할 수 있기 때문에 상술한useRef 방안을 사용해야 할 때가 많다.
3. eslint-plugin-react-hooks 플러그인에 대한 경고를 중시한다.
4. 복잡한 업무는 훅스 대신 Component를 사용한다.
이상은 React hooks의 장단점에 대한 상세한 내용입니다. React hooks의 장단점에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!