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

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 클래스를 사용해야하는 시나리오가 있습니다.

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

최신 정보

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

---

2019 년 3 월 업데이트

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

2019 년 2 월 업데이트 :

React 후크 가 도입 되면 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

위의 링크는 약간 오래되었지만 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를 사용한 메모

Functional components:

• state (useState, useReducer hooks)
• lifecycle methods (via the useEffect, useLayoutEffect hooks)
• memoization via the memo HOC

Why i prefer Funtional components

• React provide the useEffect hook which is a very clear and concise way to combine the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods
• With hooks you can extract logic that can be easily shared across components and testable
• less confusion about the scoping

React motivation on why using hooks (i.e. functional components)

참고URL : https://stackoverflow.com/questions/36097965/when-to-use-es6-class-based-react-components-vs-functional-es6-react-components