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

React를 배우는 데 시간을 보낸 후 구성 요소를 만드는 두 가지 주요 패러다임의 차이점을 이해합니다.

내 질문은 언제 어느 것을 사용해야 하는가? 다른 것의 장점 / 무역은 무엇입니까?

ES6 수업 :

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

기능의:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

나는 그 구성 요소에 의해 조작 될 상태가 없을 때마다 기능적이라고 생각하고 있습니까?

라이프 사이클 메소드를 사용하면 클래스 기반 구성 요소를 사용하는 것이 가장 좋습니다.

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

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

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

추가 정보 : 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 앱에서 병목 현상을 재정의하는 기능에 대해 들어 본 적이 없습니다. 조기 최적화는 모든 악의 근원입니다-이것이 문제가 될 때 걱정하십시오

가능하면 항상 상태 비 저장 기능 (기능 구성 요소)을 사용하십시오. 일반 React 클래스를 사용해야하는 시나리오가 있습니다.

• 구성 요소는 상태를 유지해야합니다.
• 구성 요소가 너무 많이 다시 렌더링되므로 다음을 통해 제어해야합니다. shouldComponentUpdate
• 컨테이너 구성 요소 가 필요합니다

최신 정보

이제 얕은 소품 비교를 처리 하는 자체 구현을 구현하는 PureComponent(대신 대신 Component) 확장 할 수 있는 React 클래스 shouldComponentUpdate가 있습니다. 더 읽어보기

2019 년 3 월 업데이트

https://overreacted.io/how-are-function-components-different-from-classes/

2019 년 2 월 업데이트 :

반응 고리 의 도입으로 되면 React 팀은 가능한 한 기능적 구성 요소를 사용하는 것처럼 보입니다 (JavaScript의 기능적 특성을 더 잘 준수 함).

그들의 동기 :

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

후크가있는 기능적 구성 요소 는 위에서 언급 한 단점없이 클래스 구성 요소가 수행 할 수있는 거의 모든 것을 할 수 있습니다.

가능한 빨리 사용하는 것이 좋습니다.

원래 답변

기능적 구성 요소는 클래스 기반 구성 요소보다 더 가볍지 않습니다. -https : //github.com/facebook/react/issues/5677#issuecomment-241190513

위의 링크는 약간 오래되었지만 React 16.7.0의 설명서에는 기능 및 클래스 구성 요소가 나와 있습니다.

"React의 관점과 동일합니다." --https //reactjs.org/docs/components-and-props.html#stateless-functions

구문 이외의 render 메소드를 구현하는 기능 컴포넌트와 클래스 컴포넌트 사이에는 본질적으로 차이가 없습니다.

앞으로 (위의 링크를 인용) "우리는 [반응] 그러한 최적화를 추가 할 수 있습니다."

불필요한 렌더링을 제거하여 성능을 향상시키려는 경우 두 방법 모두 지원을 제공합니다. memo기능성 부품PureComponent 클래스

-https : //reactjs.org/docs/react-api.html#reactmemo

-https : //reactjs.org/docs/react-api.html#reactpurecomponent

정말 당신에게 달려 있습니다. 상용구를 줄이려면 기능을 수행하십시오. 함수형 프로그래밍을 좋아하고 클래스를 좋아하지 않으면 기능적으로 이동하십시오. 코드베이스의 모든 구성 요소간에 일관성을 유지하려면 클래스를 사용하십시오. 와 같은 것이 필요할 때 기능 기반에서 클래스 기반 구성 요소로 리팩토링하는 데 지쳤다면 state클래스를 사용하십시오.

React 16.8부터 Stateless Functional 구성 요소라는 용어는 오해의 소지가 있으므로 더 이상 Stateless가 아닌 원인이되므로 피해야합니다 ( React.SFC 사용 중단됨 , Dan Abramov on React.SFC ). 수명주기 방법), 클래스 구성 요소와 다소 겹칩니다.

클래스 기반 구성 요소

• 상태
• 수명주기 방법
• React.PureComponent를 사용한 메모

기능적 구성 요소 :

• state ( useState , useReducer 후크)
• 라이프 사이클 메소드 ( useEffect , useLayoutEffect 후크 를 통해 )
• 메모 HOC 를 통한 메모

Funtional 구성 요소를 선호하는 이유

• 을 결합 할 수있는 명확하고 간결한 방법입니다 useEffect 후크를 제공 반응 componentDidMount, componentDidUpdate및 componentWillUnmount수명주기 방법
• 후크를 사용하면 구성 요소간에 쉽게 공유 하고 테스트 할 수있는 로직을 추출 할 수 있습니다
• 범위 지정에 대한 혼동이 줄어 듭니다

반응 의욕을 후크 (즉, 기능적 구성 요소)를 사용하는 이유에 대해.