[javascript] ES6 클래스 기반 React 구성 요소와 기능적 ES6 React 구성 요소를 언제 사용해야합니까?

당신은 올바른 생각을 가지고 있습니다. 구성 요소가 소품을 가져오고 렌더링하는 것 이상을 수행하지 않으면 기능을 수행하십시오. 동일한 소품이 주어지면 항상 동일하게 렌더링되고 작동하기 때문에 이러한 함수를 순수한 함수로 생각할 수 있습니다. 또한 수명주기 방법에 신경 쓰지 않거나 자체 내부 상태가 있습니다.

가볍기 때문에 이러한 간단한 구성 요소를 기능 구성 요소로 작성하는 것이 매우 표준입니다.

상태를 유지하는 등 구성 요소에 더 많은 기능이 필요한 경우 클래스를 대신 사용하십시오.

추가 정보 : https://facebook.github.io/react/docs/reusable-components.html#es6-classes

편집 : React Hooks가 도입 될 때까지 위의 많은 부분이 사실이었습니다.

• componentDidUpdate로 다시 복제 할 수 있습니다 useEffect(fn). 여기서 다시 fn렌더링 할 때 실행되는 함수입니다.

• componentDidMount메소드는을 사용하여 복제 할 수 있습니다 useEffect(fn, []). 여기서, fn렌더링 할 때 실행할 함수 []이며, 이전 렌더링 이후 하나 이상의 값이 변경된 경우에만 컴포넌트가 다시 렌더링 할 객체의 배열입니다. 없는 경우 useEffect()첫 번째 마운트시 한 번 실행됩니다.

• state를 사용하여 복제 할 수 있습니다 useState(). 이의 반환 값은 상태의 참조 및 상태를 설정할 수있는 함수 (예 :)로 구조화 될 수 있습니다 const [state, setState] = useState(initState). 예를 들어이를보다 명확하게 설명 할 수 있습니다.

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

클래스 오버 기능 구성 요소 사용시기에 대한 권장 사항과 관련하여 Facebook은 공식적으로 가능한 경우 기능 구성 요소 사용을 권장 합니다 . 작은 측면에서, 많은 사람들이 성능상의 이유로 기능적 구성 요소를 사용하지 않는 것에 대해 이야기하는 것을 들었습니다.

“기능 구성 요소에서 렌더링마다 이벤트 처리 기능이 재정의됩니다.”

사실이지만 구성 요소가 실제로 그런 속도 나 볼륨으로 렌더링되는지 고려해보십시오.

이러한 경우 useCallback및 useMemo후크를 사용하여 재정의 기능을 방지 할 수 있습니다 . 그러나 이로 인해 코드의 성능이 미세하게 저하 될 수 있습니다. .

그러나 솔직히 React 앱에서 병목 현상을 재정의하는 기능에 대해 들어 본 적이 없습니다. 조기 최적화는 모든 악의 근원입니다-이것이 문제가 될 때 걱정하십시오

답변

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines