React에서 컴포넌트를 생성하는 세 가지 방법은 무엇입니까?-JS 튜토리얼-php.cn

React에서 컴포넌트를 생성하는 세 가지 방법은 무엇입니까?

王林

풀어 주다： 2021-03-15 10:56:08

앞으로

3214명이 탐색했습니다.

React에서 컴포넌트를 생성하는 세 가지 방법은 무엇입니까?

다음은 React 컴포넌트의 세 가지 방식과 특징입니다. 모두에게 도움이 되기를 바랍니다.

1. 기능적 구성 요소:

(1) 구문:

function myConponent(props) {
	return `Hello${props.name}`
}

로그인 후 복사

(2) 기능:

새로운 후크 API는 공식 웹사이트에서 찾을 수 있지만 이제는 상태 저장 가능합니다.

구성 요소는 이 객체에 액세스할 수 없습니다

라이프 사이클 메서드에 액세스할 수 없습니다

(3) 권장 사항:

가능하다면 상태 비저장 구성 요소를 사용하여 단순하고 상태 비저장을 유지하세요. [저자의 말은 자식 컴포넌트를 최대한 제어하기 위해 부모 컴포넌트를 사용하고, 자식 컴포넌트는 표시를 담당하고, 부모 컴포넌트는 로직을 담당한다는 것입니다.]

2.es5 way React.createClass 컴포넌트

(1) 구문:

var myCreate = React.createClass({
	defaultProps: {
		//code
	},
	getInitialState: function() {
		return { //code };
	},
	render:function(){
		return ( //code );
	}
})

로그인 후 복사

(2) 기능:

이 방법은 상대적으로 오래되었으며 점차적으로 제거됩니다

(무료 비디오 튜토리얼 권장:

javascript 비디오 튜토리얼)

3.es6 메소드 클래스:

(1) 문법 :

class InputControlES6 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			state_exam: props.exam
		}
		//ES6类中函数必须手动绑定
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange() {
		this.setState({
			state_exam: &#39;hello world&#39;
		});
	}
	render() {
		return( //code )
	};
}

로그인 후 복사

(2) 기능 :

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

State는 생성자

props 속성 유형에서 초기화되며, 컴포넌트 기본 속성은 컴포넌트 인스턴스의 속성이 아닌 컴포넌트 클래스의 속성으로 사용되므로 클래스의 정적 구성을 사용합니다.

컴포넌트 생성의 기본 원칙을 기억하십시오:

컴포넌트 이름의 첫 글자는 대문자로 시작해야 합니다.
컴포넌트는 하나의 루트 노드만 포함할 수 있습니다(루트 노드를 래핑하지 않으려는 경우). 레이블별로 Fragment를 소개할 수 있습니다. Fragment 사용법을 몰라도 상관없습니다. 저자의 React 기본 지식 요약을 볼 수 있습니다. (1) 이 글)
Functional을 사용해 보세요. 구성 요소를 단순하고 상태 비저장으로 유지합니다.

마지막으로 함수 구성 요소와 클래스 구성 요소가 동일한 함수를 작성하는 방식의 차이점을 비교해 보겠습니다.

상위 구성 요소에 의해 제어되는 상태 비교

Function 구성 요소:

function App(props) {
	function handleClick() {
		props.dispatch({ type: &#39;app/create&#39; });
	}
	return <div onClick={handleClick}>{props.name}</div>
}

로그인 후 복사

class 구성 요소:

class App extends React.Component {
	handleClick() {
		this.props.dispatch({ type: &#39;app/create&#39; });
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.props.name}</div>
	}
}

로그인 후 복사

self 비교 -유지된 상태

import React, { useState } from &#39;react&#39;;
function App(props) {
	const [count, setCount] = useState(0);
	function handleClick() {
		setCount(count + 1);
	}
	return <div onClick={handleClick}>{count}</div>
}

로그인 후 복사

클래스 구성 요소:

class App extends React.Component {
	state = { count: 0 }
	handleClick() {
		this.setState({ count: this.state.count +1 })
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.state.count}</div>
	}
}

로그인 후 복사