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>
    );
}

그 컴포넌트에 의해 조작될 수 있는 상태가 없을 때는 항상 기능한다고 생각합니다만, 그것뿐입니까?

라이프 사이클 방법을 사용한다면 클래스 기반 구성 요소를 사용하는 것이 가장 좋을 것 같습니다.

새로운 답변:React Hooks가 도입되기 전까지는 다음 중 많은 것이 사실이었다.

• componentDidUpdate 사용하여 복제할 수 .useEffect(fn)서, snowledge.fn재렌더링 시 실행되는 기능입니다.

• componentDidMount될 수 있습니다.useEffect(fn, [])서, snowledge.fn는 재렌더링 시 이며, 렌 、 is 、 렌 、 is 、 is is is is is is 。[]는 컴포넌트가 재렌더되는 오브젝트의 배열입니다.이전 렌더링 이후 값이 변경된 경우만 해당됩니다. 때문에, 없문문 as asuseEffect()아, 네, 네, 네.

• 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

참고로 퍼포먼스상의 이유로 기능 컴포넌트를 사용하지 않는 것에 대해 논의하는 사람도 많이 있습니다.구체적으로는 다음과 같습니다.

"기능 컴포넌트에서 렌더링별로 이벤트 처리 기능이 재정의됩니다."

사실이지만, 컴포넌트가 실제로 이러한 속도나 볼륨으로 렌더링되는지 고려하시기 바랍니다.

이 을 방지할 수 .useCallback ★★★★★★★★★★★★★★★★★」useMemo단, 코드의 퍼포먼스가 (현미경적으로) 악화될 수 있습니다.

하지만 솔직히 리액트 앱에서 기능을 재정의하는 것이 병목 현상이라는 것은 들어본 적이 없습니다.섣부른 최적화는 모든 악의 근원입니다. 문제가 생겼을 때 이를 염려하십시오.

---

오래된 답변:네 생각이 옳다.컴포넌트가 소품이나 렌더링을 하는 것 이외에는 아무것도 할 수 없는 경우는, 기능성을 중시합니다.이들은 같은 소품에서 항상 동일하게 렌더링하고 동작하기 때문에 순수한 함수라고 생각할 수 있습니다.또, 라이프 사이클의 방법이나 내부 상태에 대해서는 신경 쓰지 않습니다.

경량이기 때문에 이 간단한 컴포넌트를 기능 컴포넌트로 작성하는 것은 매우 표준적입니다.

컴포넌트에 상태 유지와 같은 기능이 더 필요한 경우 클래스를 대신 사용하십시오.

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

업데이트 2019년 3월

원래 답변에 기재된 내용을 바탕으로 합니다.

React 기능과 클래스 간에 근본적인 차이가 있습니까?물론 정신 모델에는 있습니다.

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#issuecomment-241190513

위의 링크는 약간 오래된 것이지만 React 16.7.0 매뉴얼에서는 기능 컴포넌트와 클래스 컴포넌트가 다음과 같이 기재되어 있습니다.

React의 관점에서 보면 동등합니다.

https://reactjs.org/docs/components-and-props.html#stateless-functions

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

향후 (위 링크 인용):

[React]는 이러한 최적화를 추가할 수 있습니다.

불필요한 렌더링을 배제하고 성능을 향상시키려면 두 가지 접근 방식이 모두 지원됩니다. memo의 경우 및 「」를 참조해 주세요.PureComponent업용입입니니다

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

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

정말 너한테 달렸어.보일러 플레이트를 줄이고 싶다면 기능을 발휘하세요.기능성 프로그래밍을 좋아하고 수업을 좋아하지 않는 경우 기능성 프로그래밍으로 전환하십시오.코드베이스의 모든 컴포넌트 간에 일관성을 유지하려면 클래스를 선택합니다.인 컴포넌트로의 state.

가능하면 항상 상태 비저장 기능(기능 컴포넌트)을 사용하도록 하십시오.일반 React 클래스를 사용해야 하는 시나리오는 다음과 같습니다.

• 구성 요소가 상태를 유지해야 합니다.
• 고 있기 할 가 있습니다.또한 이 컴포넌트를 컨트롤 할 필요가 있습니다.shouldComponentUpdate
• 컨테이너 구성 요소가 필요합니다.

갱신하다

'리액트'가 있습니다PureComponent수 것(「」의 「」의 「」의 「」(「」의 「」)Component )을합니다.shouldComponentUpdate얄팍한 소품 비교가 가능해요.자세한 것은 이쪽

React 17에서 Stateless Functional Components라는 용어는 오해를 불러일으킬 수 있으므로 피해야 합니다(React).SFC는 추천하지 않고, 댄 아브라모프는 리액트에 있습니다.SFC), 상태를 가질 수 있으며, (라이프 사이클 방식으로서 기능하는) 훅도 가질 수 있으며, 클래스 컴포넌트와 거의 중복되지 않습니다.

클래스 베이스 컴포넌트

• 주
• 라이프 사이클 방식
• 리액트를 통한 리액트.순수 컴포넌트

기능 컴포넌트:

• state(useState, useReducer 훅)
• 라이프 사이클 메서드(useEffect, useLayoutEffect 후크 사용)
• 메모 HOC에 의한 메모화

기능 컴포넌트를 선호하는 이유

• 은 React의 useEffect를 입니다." " " " " " " " " " "componentDidMount,componentDidUpdate ★★★★★★★★★★★★★★★★★」componentWillUnmount 사이클 메서드
• 후크를 사용하면 컴포넌트 간에 쉽게 공유하여 테스트 가능한 로직을 추출할 수 있습니다.
• 범위 지정에 대한 혼동을 줄임

후크를 사용하는 이유에 대한 동기 부여(즉, 기능 구성 요소)

현재 생산중인 어플리케이션에서 기능성 컴포넌트를 많이 사용하고 있습니다.기능 컴포넌트에는 대체적인 "오류 경계"가 없기 때문에 클래스 컴포넌트를 "오류 경계"에 사용한 것은 한 번뿐입니다.

"클래스 컴포넌트"는 말 그대로 딱 한 번 사용했어요.

양식 입력 필드를 재사용할 수 있고 반응 표시 조건을 사용하여 양식을 분리할 수 있으므로 양식 기능이 더 쉽습니다.

클래스는 분해하거나 재사용할 수 없는 하나의 큰 컴포넌트입니다.팝업 모듈 등에서 알고리즘을 실행하는 컴포넌트 등 기능 부하가 높은 컴포넌트에 적합합니다.

베스트 프랙티스는 기능 컴포넌트를 재사용한 후 작은 기능 컴포넌트를 사용하여 완전한 섹션을 조립하는 것입니다(예: React 폼의 파일로 Import된 입력 필드).

또 다른 베스트 프랙티스는 이 과정에서 컴포넌트를 중첩하지 않는 것입니다.

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