クラスコンポーネントと比較した反応関数コンポーネントの利点は何ですか?

クラス コンポーネントに対する反応関数コンポーネントの利点は次のとおりです: 1. 関数コンポーネントの構文が短くてシンプルなので、開発、理解、テストが容易になります; 2. 関数コンポーネントはパフォーマンスの消費が少ないため、関数コンポーネントはパフォーマンスの消費が低くなります。コンポーネントはインスタンスを作成する必要がなく、レンダリング時に実行され、返された反応要素を取得した後、すべての中間要素が直接破棄されます。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

1. クラス コンポーネント

クラス コンポーネントは、その名前が示すように、ES6 クラスの形式で記述されており、このクラスは React を継承する必要があります。 .Component

親コンポーネントによって渡されたパラメータにアクセスしたい場合は、これを通じてアクセスできます。props

render メソッドはコンポーネントに実装されている必要があり、React オブジェクトは

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

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

2. 関数コンポーネント

関数コンポーネントは、名前が示すように、React を実装することです。関数記述形式のコンポーネント (React です) コンポーネントを定義する最も簡単な方法

function Welcome(props) {

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

関数の最初のパラメータは props で、親コンポーネントから渡されたパラメータを受け取るために使用されます

3. 違い

2 つの React コンポーネントの違いは、主に次の方向に分類されます。記述形式

#両者の最も明らかな違い 違いは記述形式にあり、同じ関数の実装をクラスコンポーネントと関数コンポーネントの記述形式にそれぞれ対応させることができます

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. 状態管理

フックが登場する前は、関数コンポーネントはステートレスコンポーネントであり、クラスコンポーネントで setState を呼び出すのとは異なり、コンポーネントの状態を保存できません。

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

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

関数コンポーネントにはライフサイクルがありません。これは、これらのライフサイクルフックが継承された React.Component から取得されるためです。

したがって、ライフサイクルを使用すると、次のことができます。クラス コンポーネントのみを使用します。ただし、関数コンポーネントは useEffect を使用して、ライフ サイクルを置き換える役割を完了することもできます。簡単な例を次に示します:

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

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

上記の簡単な例は、componentDidMount ライフ サイクルに対応しますクラスのcomponent

useEffectコールバック関数で関数を返すと、componentWillUnmount

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>

クラス コンポーネントの場合、コンポーネントはインスタンス化してからレンダーを呼び出す必要があります。インスタンス オブジェクトのメソッド:

// 你的代码  
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>)
}

class ProfilePage extends React.Component {
	showMessage() {
		alert('Followed '+ this.props.user);
	}

	handleClick() {
		setTimeout(this.showMessage.bind(this), 3000);
	}

	render() {
		return <button onClick= {
			this.handleClick.bind(this)
		}

		>Follow</button>
	}
}

両者は同じ機能を持っているように見えますが、クラスコンポーネントでは this.props.user が出力され、React の Props は Immutable であるため、変更されることはありませんが、これは常に変更可能であるため、レンダリング関数とライフサイクル関数で新しいバージョンを読み取ることができます。

つまり、リクエストの実行中にコンポーネントが更新された場合です。 this.props が変更されます。 showMessage メソッドは、ユーザーを「最新」の props から読み取ります。

関数コンポーネント自体は存在せず、props も変更されないため、同じクリックでも、アラートの内容は以前の内容のままです

概要

どちらのコンポーネントにも独自の長所と短所があります#関数コンポーネントの構文は短くてシンプルなので、より使いやすくなっています。開発、理解、テストが簡単。クラス コンポーネントはこれを多用するため混乱する可能性もあります。クラス コンポーネントはクラス コンポーネントのインスタンスを作成する必要があり、破棄できないため、クラス コンポーネントのパフォーマンスの消費は比較的大きくなります。 。

関数コンポーネントはインスタンスを作成する必要がないため、パフォーマンスの消費が低くなります。関数コンポーネントはレンダリング時に実行されます。返された反応要素を取得した後、すべての中間コンポーネントは直接破棄されます。

[関連する推奨事項:

]

以上がクラスコンポーネントと比較した反応関数コンポーネントの利点は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。