왜 기능 구성 요소가 미래입니까?

몇 달 전에 React에서 새로운 문서를 발표했습니다.React Docs Beta 기능 구성 요소를 강조합니다.이것은 팀의 위대한 조치이다. 왜냐하면 우리는 16.8판이 도입된 이래 React 기능 구성 요소가 미래의 추세라는 것을 이미 알고 있기 때문이다.
갈고리가 나타나기 전에 클래스 구성 요소는 React의 주요 영웅으로 복잡한 응용을 구축할 때마다 사용된다.우리는 React의 기원과 이 두 구성 요소의 역사를 깊이 연구하여 클래스 구성 요소가 붕괴되는 원인과 기능 구성 요소가 현재 React 응용 프로그램을 구축하는 가장 뚜렷한 선택이 되는 방법을 찾아내야 한다.

이야기의 기원
리액트는 2013년 5월 미국의 한 회의JavaScript conference에서 전 세계에 출시됐다.게임 규칙이 바뀌었고 JavaScript 라이브러리의 왕이 되었다는 사실이 증명되었다.그것은 페이스북의 한 소프트웨어 엔지니어가 만든 것이다.2011년에는 리액트의 초기 원형FaxJS도 만들었다.
React를 도입하기 전web applications은 템플릿이나 HTML 명령을 사용하여 작성되었습니다.Reactdifferently는 전체 사용자 인터페이스를 여러 개의 작은 구성 요소로 분해하고 이 구성 요소들을 조합하여 응용 프로그램의 UI를 완성했다.
지난 10년 동안 많은 전단 틀이 등장했고 지금까지 React는 살아남았을 뿐만 아니라 왕성하게 발전했고 사용과 보급 분야에서 다른 모든 틀을 효과적으로 격파했다.

지난 5년간 유행했던 주요 전단 틀을 비교해 보자.
스타티스타에 따르면 리액트는 2021년 글로벌 개발자 중most used 웹 프레임워크로 전체 점유율은 40.14%, 제이큐리는 34.43%였다.

클래스 구성 요소는 무엇입니까?
본고에서 앞에서 논의한 바와 같이React의 구성 요소는 하나의 코드로 사용자 인터페이스의 특정한 부분을 보여주는 것을 책임진다.다음과 같은 두 가지 유형의 어셈블리가 있습니다.

클래스 구성 요소

기능 부품

클래스 어셈블리에서는 ES6 JavaScript 클래스를 사용하여 어셈블리를 생성합니다.16.8 버전에서 연결을 도입하기 전에 이것은 React 응용 프로그램을 구축하는 가장 흔한 방식이다.

import React from "react"; 

class App extends React.Component {
  render() {
    return <h1>I am Class Component</h1>;
  }
}
export default App;

클래스 어셈블리를 생성하려면 확장 React의 클래스를 생성해야 합니다.구성 요소,render () 함수가 있습니다.render ()에서 평소와 같이 되돌아갈 수 있습니다 JSX.
클래스 어셈블리는 도구, 상태 및 다양한 라이프 사이클 메서드에 액세스할 수도 있습니다. 예를 들어,

구성 요소 설치

구성 요소 설치

모듈은 아이템

을 수령합니다

구성 요소 업데이트

구성 요소가 업데이트됩니다

.

구성 요소 업데이트

구성 요소 제거

구성 요소당 수명 주기three main phases:

설치

업데이트

제거

구성 요소를 DOM에 로드하는 프로세스를 로드라고 합니다.구성 요소 자체에 약간의 변경과 업데이트가 발생했을 때, 이를 업데이트라고 한다.제거란 DOM에서 구성 요소를 제거하는 것입니다.
모든 라이프 사이클 방법은 어셈블리 라이프 사이클의 각 단계에서 어셈블리와 상호 작용하는 데 사용됩니다.

기능 구성 요소는 무엇입니까?
기능 구성 요소는 JavaScript 함수를 사용하여 React 구성 요소를 만드는 구성 요소입니다.

import React from "react";

function App() {
    return <h1>I am a Functional Component</h1>;
}
export default App;

기능 구성 요소를 만들려면 JavaScript에서처럼 함수를 선언해야 합니다.
위의 코드 세션은 기능 구성 요소의 예입니다. 이것은 우리가 위에서 본 클래스 구성 요소의 서면 버전입니다.ES6 화살표 함수를 사용하여 어셈블리를 생성할 수도 있습니다.

import React from "react";

const App = () => {
    return (
       <h1>
          I am a Functional Component created with ES6 arrow function       
       </h1>
)}

export default App;

이 두 가지 유형의 구성 요소를 비교할 수 있고 기능 구성 요소의 문법이 더욱 간단하고 또렷하다는 것을 직접 볼 수 있습니다.
그러나 문법이 항상 어떤 기술에 들어가기에는 충분하지 않다. 복잡한 응용 프로그램을 구축하기 위해서는 강력한 기능과 능력이 필요하다. 모든 기능 구성 요소가 처음에는 부족했다.
그래서 이론적으로 개발자는 무엇을 좋아하든지 클래스 구성 요소나 기능 구성 요소를 사용할 수 있다.그러나 현실에서 클래스 구성 요소만 복잡한 기능과 응용 프로그램을 구축할 수 있기 때문에 개발자들은 선택의 여지가 없다.

기능 구성 요소의 굴기
2018년 리액트 콘퍼런스 이후 모든 것이 달라졌다"며"Sophie Alpert와 Dan Abramov가 연계를 도입한 데 이어 리안 플로런스가 이를 사용하기 위해 앱을 재구성하는 방법을 보여줬다"고 설명했다.React Docs
기능 구성 요소에 갈고리를 도입하는 동기는'5년간의 작성과 유지보수 과정에서 겪은 문제'를 해결하기 위한 것이다.React Docs

With hooks we separate code not based on the lifecycle method name but based on what the code is doing” - Dan Abramov

갈고리가 이처럼 주목받는 것은 상태와 생명주기 방법의 힘을 기능 부품에 도입했기 때문이다.현재useState 갈고리가 setState 방법을 처리하는데useEffect는 많은 생명주기 방법을 대체하기에 충분하다.클래스 구성 요소에 의존하지 않습니다.

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

React Docs

16.8 릴리즈에는 모두 10개의 내장 고리가 있습니다 -

useState

사용 효과

컨텍스트 사용

사용자 교육기

콜백 사용

비망록 사용

useRef

명령 처리 사용

레이아웃 효과 사용

디버그 값 사용

모든 갈고리를 자주 사용하는 것은 아니다. 대부분의 경우 우리는useState와useEffect만 필요로 한다.그러나 만약 이 10개의 갈고리가 당신에게 부족하다면, React도 당신에게 자신의 갈고리를 구축하는 것을 선택하게 할 것이다. custom hook

클래스 구성 요소의 미래
우리는 갈고리가 나타난 후류 부품의 중요성을 어떻게 낮추는지 토론했다.그러나 클래스 구성 요소는 사라지지 않고 적어도 빨리 사라지지 않는다.React 팀 자체도 현재 React에서 클래스 구성 요소를 삭제할 계획이 없다고 언급했다.
많은 유류 프로젝트가 클래스 구성 요소를 사용하지만, React팀은 비교적 새로운 프로젝트에 기능 구성 요소를 사용하는 것을 권장합니다.모든 현대 React 튜토리얼도 기능 구성 요소에만 초점을 맞춘다.또한 리액트 팀이 내놓은 새로운 테스트 버전 문서도 갈고리가 미래 리액트 응용 프로그램 개발에서 중요한 역할을 발휘할 미래 비전을 입증했다.

결론
이 글은 React에 대한 역사 분석이다.기능 구성 요소가 클래스 구성 요소를 어떻게 격파하는지도 연구했고 React 응용 프로그램 개발의 관건적인 역할이 되었다. 비록 이것은 낮은 소모량의 건축 구성 요소로 도입되었지만, 많든 적든 일부 도구만 있는 정적 응용 프로그램만 나타낼 수 있다.
만약 당신이 이 글을 좋아한다면, 당신의 사교 계정에 공유해 주십시오.제 것 좀 보세요blog. 이런 글을 더 놓치고 싶지 않으면 따라오세요.