왜 클래스 구성 요소에서 함수 구성 요소를 추천합니까?

구성 요소에 관한 몇 편의 글을 읽는 과정에서 최근의 글이 함수 구성 요소를 추천하는 것 같다.왜 이러지?이렇게 쓴 기사.

구성 요소의 표현 방법

먼저 구성 요소는 UI와 독립적으로 재활용할 수 있는 부품입니다.
React에서는 어셈블리를 표현하는 두 가지 방법이 있습니다.

함수 구성 요소

클래스 구성 요소

함수 구성 요소

함수 어셈블리는 JS의 표준 함수와 같습니다.

function Greeting(props) {
  return <h1>Hi, {props.name}</h1>;
}

상기 구성 요소는 props를 받았고 React의 요소를 되돌려받았습니다.

클래스 구성 요소

클래스 구성 요소는 ES6 클래스를 사용하여 기술합니다.

class Greeting extends React.Component {
  render() {
    return <h1>Hi, {this.props.name}</h1>;
  }
}

반에는 React가 있다.component를 추가하여 React의 요소에 응답합니다.

뭐가 달라요?

나는 가장 큰 차이가 전선의 길이라고 생각한다.
클래스 어셈블리의 경우, React.component에서 확장 클래스를 제외하고는 return 이전에 render에 기술해야 한다.
다른 한편, 함수 구성 요소가 props를 매개 변수로 삼으면 React의 요소를 임의로 되돌려줍니다.따라서 함수 구성 요소의 코드량이 비교적 적다.

예전에는 반 구성 요소를 밀었습니까?

그렇다면 왜 함수 구성 요소는 원래 그다지 추천되지 않습니까?
이유는 클래스 구성 요소에서만 사용할 수 있는 기능이 있는 것 같습니다.
그 기능

State

Lifecycle Hooks

라고 말했다.

State(상태)

State는 어셈블리 렌더링을 조작하는 객체입니다.
이전 함수 어셈블리는 State를 기반으로 요소를 렌더링할 수 없는 무상태 어셈블리라고 합니다.
현재Hooks(React 16.8에 추가된 새로운 기능)는 함수 구성 요소에서도 상태를 사용할 수 있습니다.

라이프 사이클

Lifecycle은 Mounting, Updating(업데이트), Unmounting(언로드)의 일련의 프로세스를 말합니다.

Mounting(마운트): 구성 요소 거리 측정

Updating(업데이트): 어셈블리의 State 업데이트

Unmounting(언로드): 어셈블리의 거리 측정기 분리

이전에는 클래스 구성 요소로만 이 생명 주기를 조작할 수 있었다.
이제 State와 마찬가지로 함수 어셈블리에서도 주기를 간단하게 설정할 수 있습니다.

Summary

결론은 React의 버전 업그레이드로 함수 구성 요소에 Hooks와 같은 편리한 기능을 추가하면 반 구성 요소의 출현이 없어진다는 것이다.
앞으로는 함수 구성 요소를 쾌적한 마음으로 사용할 수 있다.

Reference

https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108
https://reactjs.org/docs/components-and-props.html
https://reactjs.org/docs/hooks-effect.html