클래스 구성 요소에 비해 반응 기능 구성 요소의 장점은 무엇입니까?

클래스 구성 요소에 비해 반응 기능 구성 요소의 장점은 다음과 같습니다. 1. 기능 구성 요소 구문이 더 짧고 단순하여 개발, 이해 및 테스트가 더 쉽습니다. 2. 기능 구성 요소는 필요하지 않기 때문에 성능 소비가 적습니다. 인스턴스를 생성하고, 렌더링 시 실행하고, 반환된 반응 요소를 가져온 후 모든 중간 요소를 직접 파괴합니다.

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

1. 클래스 구성 요소

클래스 구성 요소는 이름에서 알 수 있듯이 ES6 클래스 형식으로 작성됩니다. 이 클래스는 React.Component를 상속해야 합니다.

상위 구성 요소가 전달한 매개 변수에 액세스하려면 , this.props를 통해 액세스할 수 있습니다

렌더링 메소드는 컴포넌트에서 구현되어야 하며 다음과 같이 React 객체가 반환됩니다.

class Welcome extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {
		return <h1>Hello,{this.props.name}</h1>
	}

2. 함수 컴포넌트

Function 컴포넌트는 이름은 함수를 통해 작성됩니다. 양식으로 React 구성요소를 구현하는 것은 React에서 구성요소를 정의하는 가장 간단한 방법입니다

function Welcome(props) {

	return <h1>Hello,{props.name}</h1>;
}

함수의 첫 번째 매개변수는 props이며 상위 구성요소가 전달한 매개변수를 받는 데 사용됩니다

세 가지. 차이점

두 가지 유형의 React 구성 요소의 차이점은 크게 다음과 같은 방향으로 나뉩니다.

1. 쓰기 형식

둘 사이의 가장 확실한 차이점은 쓰기 형식입니다. 동일한 함수의 구현은 각각 클래스 컴포넌트와 함수 컴포넌트의 작성 형태에 해당될 수 있습니다.

함수 컴포넌트:

function Welcome(props) {   
return <h1>Hello, {props.name}</h1>; 
}

클래스 컴포넌트:

cass Welcome extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {

		return <h1>Hello,{this.props.name}</h1>
	}
}

2. Hooks가 나오기 전에 함수 컴포넌트는 상태 비저장 구성 요소이며 클래스 구성 요소에서 setState를 호출하는 것과 달리 구성 요소의 상태를 저장할 수 없습니다

상태를 관리하려면 다음과 같이 useState를 사용할 수 있습니다.

const FunctionalComponent=()=> {
	const [count,
	setCount]=React.useState(0);

	return (
	<div> 
	<p>count: {count}</p> 
	<button onClick= {()=> setCount(count + 1)}>Click</button> 
	</div>);
};

후크를 사용할 때 일반적으로 함수 구성 요소가 상태를 호출하는 경우 , 클래스 구성 요소를 생성하거나 상태를 상위 구성 요소로 업그레이드한 다음 하위 구성 요소

3. Lifecycle

이러한 수명 주기가 없기 때문입니다. 후크는 상속된 React.Component에서 나옵니다

따라서 라이프사이클을 사용하는 경우 클래스 컴포넌트만 사용할 수 있습니다

그러나 함수 컴포넌트는 useEffect를 사용하여 교체 라이프사이클을 완료할 수도 있습니다.

const FunctionalComponent=()=> {
	useEffect(()=> {
		console.log("Hello");
	}

	, []);
	return <h1>Hello,World</h1>;
};

The 위의 간단한 예는 클래스 구성 요소의 구성 요소DidMount 수명 주기에 해당합니다

useEffect 콜백 함수에서 함수를 반환하면 구성 요소가 마운트 해제될 때 반환 함수가 실행됩니다. 함수 구성 요소인 경우 호출은 함수를 실행하는 것입니다.

const FunctionalComponent=()=> {
	React.useEffect(()=> {
		return ()=> {
			console.log("Bye");
		};
	}
	, []);
	return <h1>Bye,World</h1>;
};

클래스 구성 요소인 경우 구성 요소를 인스턴스화한 다음 인스턴스 개체의 렌더링 메서드를 호출해야 합니다.

// 你的代码  
function SayHi() {
	return <p>Hello,
	React</p>
}

// React内部  
const result = SayHi(props) //  <p>Hello, React</p>

5. 렌더링된 값

먼저 예를 들어보세요

해당 함수 컴포넌트는 다음과 같습니다.

// 你的代码  
class SayHi extends React.Component {
	render() {
		return <p>Hello,React</p>
	}
}

// React内部  
const instance = new SayHi(props) //  SayHi {}  
const result = instance.render() //  <p>Hello, React</p>

해당 클래스 컴포넌트는 다음과 같습니다.

function ProfilePage(props) {
	const showMessage=()=> {
		alert('Followed '+ props.user);
	}

	const handleClick=()=> {
		setTimeout(showMessage, 3000);
	}

	return (<button onClick= {
		handleClick
	}

	>Follow</button>)
}

둘은 동일한 구현 함수를 가지고 있는 것처럼 보이지만 클래스 컴포넌트에서는 이렇습니다. .props.user는 출력입니다. Props는 React에서 변경할 수 없으므로 절대 변경되지 않지만 항상 가변적이므로 렌더링 및 수명 주기 함수에서 새 버전을 읽을 수 있습니다. 따라서 요청이 진행되는 동안 구성 요소가 업데이트되면 달리기. this.props가 변경됩니다. showMessage 메소드는 "최신" props에서 사용자를 읽습니다

함수 구성 요소 자체가 존재하지 않으며 props도 변경되지 않으므로 동일한 클릭에도 경고 내용은 여전히 ​​이전 내용입니다

Summary

두 구성 요소 모두 장점과 단점이 있습니다.

함수 구성 요소 구문이 더 짧고 단순하여 개발, 이해 및 테스트가 더 쉬운 반면 클래스 구성 요소는 이

클래스의 과도한 사용으로 인해 혼란스러울 수 있습니다. 클래스 구성 요소는 클래스 구성 요소의 인스턴스를 생성해야 하며 소멸될 수 없기 때문에 구성 요소 소비가 상대적으로 큽니다. 기능적 구성요소는 인스턴스를 생성할 필요가 없고, 렌더링 시 실행되며, 반환된 반응 요소를 가져온 후 모든 중간 구성요소가 직접 파괴되기 때문에 성능 소비가 낮습니다.

【관련 추천:

Redis 비디오 튜토리얼

】

위 내용은 클래스 구성 요소에 비해 반응 기능 구성 요소의 장점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!