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

React에서 구성 요소를 만드는 세 가지 방법과 그 유사점과 차이점 소개:

1. 기능적 구성 요소

(추천 튜토리얼: react 튜토리얼)

1.

공식 웹사이트를 방문하면 새로운 Hooks API에 대해 알아볼 수 있습니다. 예전에는 상태 비저장 구성 요소였지만 이제는 상태 저장이 가능합니다

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

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

3. 제안:

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

2. es5 방식 React.createClass 컴포넌트

1 구문

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

2. 기능

이 메소드는 상대적으로 오래되었으며 점차적으로 제거됩니다. 3.
es6 메소드 클래스:

1. 구문:

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

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

State는 생성자

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

컴포넌트 생성의 기본 원칙을 기억하세요:

1. 컴포넌트 이름의 첫 글자는 대문자여야 합니다.

2. 컴포넌트는 루트 노드를 하나만 포함할 수 있습니다(루트 노드를 래핑하지 않으려는 경우). 라벨을 통해 Fragment를 도입할 수 있습니다.

3. 기능적 구성 요소를 사용하고 단순하고 상태 없는 상태로 유지하세요.

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

상태 비교 상위 컴포넌트에 의해 제어

기능 컴포넌트:

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: 'hello world'
		});
	}
	render() {
		return( //code )
	};
}

class 컴포넌트

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

자체 유지 관리 상태 비교

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

class 컴포넌트:

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

위 내용은 React에서 컴포넌트를 생성하는 세 가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!