반응에서 구성 요소를 정의하는 세 가지 방법의 차이점은 무엇입니까?

차이점: 1. 기능적으로 정의된 상태 없는 구성 요소는 수명 주기 메서드에 액세스할 수 없는 반면, es5 및 es6 메서드는 상태 있는 구성 요소를 정의하고 수명 주기 메서드에 액세스할 수 있습니다. 2. es5 메서드의 this 함수는 자동으로 바인딩될 수 있으며 es6 메서드는 자동으로 바인딩할 수 없으며 수동으로 바인딩해야 합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React에서 React 구성 요소를 정의하는 세 가지 방법의 차이점은 무엇입니까? React 출시 이후 서로 다른 이유로 React 구성 요소를 정의하는 세 가지 방법이 있었는데, 모두 동일한 목표로 이어졌습니다. :

기능적 스타일로 정의된 상태 비저장 구성 요소
es5 기본 방식으로 React.createClass 정의 구성 요소
es6 양식 확장 React.Component로 정의된 구성 요소

1. 상태 비저장 기능 구성 요소

It 순수한 디스플레이 구성 요소를 생성하기 위한 것입니다. 이러한 종류의 구성 요소는 들어오는 props를 기반으로 표시하는 역할만 담당하며 상태 작업은 포함하지 않습니다.

구성 요소는 인스턴스화되지 않으며 전반적인 렌더링 성능이 향상되며 이 개체는 2. ES5 네이티브 메소드 React.createClass // RFC

React.createClass는 함수 메소드를 자체 바인딩하여 불필요한 성능 오버헤드를 발생시키고 코드 노후화 가능성을 높입니다.

3. E6 상속 형식 React.Component // RCC

현재 권장되는 상태 저장 구성 요소 생성 방법은 결국 React.createClass 형식과 비교하여 코드 재사용이 더 잘 이루어질 수 있습니다.

상태 비저장 구성 요소와 후자 두 구성 요소의 차이점

상태 비저장 구성 요소와 비교하여 React.createClass와 React.Component는 모두 상태 저장 구성 요소를 생성하며 이러한 구성 요소는 구성 요소의 수명 주기 메서드에 액세스할 수 있습니다. .

React.createClass****와 React.Component의 차이점

this가 자체 바인딩되는 함수

React.createClass로 생성된 컴포넌트에서 각 멤버 함수의 this는 자동으로 React에 의해 바인딩됩니다. 함수에서 this가 올바르게 설정됩니다.

React.Component로 생성된 구성 요소의 경우 해당 멤버 함수는 이를 자동으로 바인딩하지 않으며 개발자는 수동으로 바인딩해야 합니다. 그렇지 않으면 현재 구성 요소 인스턴스 개체를 얻을 수 없습니다.

컴포넌트 속성 유형 propTypes와 해당 기본 props 속성 defaultProps가 다르게 구성됩니다

React.createClass 컴포넌트 생성 시 컴포넌트 props의 속성 유형과 해당 컴포넌트의 기본 속성이 컴포넌트 인스턴스의 속성으로 구성됩니다. 여기서 defaultProps는 getDefaultProps 메소드를 사용하여 기본 컴포넌트 속성을 가져옵니다. React.Component가 컴포넌트 생성 시 이 두 가지 해당 정보를 구성하면 해당 정보는 컴포넌트 인스턴스의 속성이 아닌 컴포넌트 클래스의 속성으로 사용됩니다. 소위 클래스의 정적 속성이 구성됩니다.
컴포넌트의 초기 상태 구성이 다릅니다

React.createClass로 생성된 컴포넌트의 상태는 getInitialState 메소드를 통해 컴포넌트 관련 상태를 구성하는 것입니다. React.Component는 생성자에 컴포넌트 속성을 초기화하는 것처럼 선언되어 있습니다.

최종 요약

가능하면 상태 비저장 구성 요소 생성을 사용해 보세요.

React.Component로 생성할 수 있는 컴포넌트의 경우 재사용성을 높이고 성능을 향상시키기 위해 React.createClass 형식으로 컴포넌트를 생성하지 않도록 하세요.

추천 학습: "

react 비디오 튜토리얼"

위 내용은 반응에서 구성 요소를 정의하는 세 가지 방법의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!