Apakah kelebihan komponen fungsi tindak balas berbanding komponen kelas?

Kelebihan komponen fungsi tindak balas berbanding komponen kelas ialah: 1. Sintaks komponen fungsi adalah lebih pendek dan ringkas, yang menjadikannya lebih mudah untuk dibangunkan, difahami dan diuji 2. Komponen berfungsi mempunyai penggunaan prestasi rendah kerana komponen berfungsi komponen tidak perlu mencipta instance. Ia dilaksanakan semasa rendering Selepas mendapat elemen tindak balas yang dikembalikan, semua elemen perantaraan dimusnahkan secara langsung.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

1. Komponen Kelas

Komponen kelas, seperti namanya, ditulis dalam bentuk kelas ES6 ini mesti mewarisi React .Komponen

Jika anda ingin mengakses parameter yang diluluskan oleh komponen induk, anda boleh mengaksesnya melalui ini.props

Kaedah render mesti dilaksanakan dalam komponen dan objek React dikembalikan Sebagai balasannya. komponen melalui penulisan fungsi Ia adalah cara paling mudah untuk menentukan komponen dalam React

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

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

Parameter pertama fungsi ialah prop, yang digunakan untuk menerima parameter yang diluluskan oleh komponen induk 3. Perbezaan

function Welcome(props) {

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

Bagi kedua-dua komponen React, perbezaan terutamanya dibahagikan kepada arah utama berikut:

1. Borang penulisanKedua-duanya Perbezaan yang paling ketara terletak pada bentuk penulisan Pelaksanaan fungsi yang sama boleh sepadan dengan bentuk penulisan komponen kelas dan komponen fungsi masing-masing

Komponen fungsi:

Komponen kelas:

2 Pengurusan negeri

Sebelum cangkuk keluar, komponen fungsi ialah komponen tanpa kewarganegaraan dan tidak boleh menyimpan keadaan komponen, tidak seperti memanggil setState dalam komponen kelas

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

Jika anda ingin mengurus keadaan, anda boleh menggunakan useState, seperti berikut:

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

	render() {

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

Apabila menggunakan cangkuk, secara amnya jika komponen fungsi memanggil keadaan, anda perlu mencipta komponen kelas atau menaik taraf keadaan kepada komponen induk anda, dan kemudian diserahkan kepada komponen anak melalui objek props

3. Kitaran hayat

Komponen fungsi, tidak ada kitaran hidup. hanya boleh menggunakan komponen kelas

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

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

Walau bagaimanapun, komponen fungsi juga boleh menggunakan useEffect untuk menggantikan kitaran hayat Berikut ialah contoh mudah:

Contoh ringkas di atas sepadan dengan hayat komponenDidMount. kitaran dalam komponen kelasJika fungsi dikembalikan dalam fungsi panggil balik useEffect, fungsi pulangan akan Ia dilaksanakan apabila komponen dinyahlekap, sama seperti componentWillUnmount

4. Kaedah panggilan

Jika ia adalah komponen fungsi, panggilan adalah untuk melaksanakan fungsi:

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

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

Jika ia adalah komponen kelas, anda perlu membuat instantiate komponen dan kemudian panggil kaedah pemaparan objek contoh:

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

5 Dapatkan nilai yang diberikan

Mula-mula berikan contoh

Fungsi. komponen sepadan seperti berikut:

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

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

Komponen kelas sepadan seperti berikut:

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

Kedua-duanya nampaknya melaksanakan fungsi adalah konsisten, tetapi dalam komponen kelas, keluarkan this.props.user , Props tidak boleh diubah dalam React jadi ia tidak pernah berubah, tetapi ini sentiasa boleh berubah supaya anda boleh menukarnya dalam fungsi pemaparan dan kitaran hayat Baca versi baharu

Jadi jika komponen kami dikemas kini apabila permintaan dijalankan. ini.props akan berubah. Kaedah showMessage membaca pengguna

daripada prop "terkini", dan komponen fungsi itu sendiri tidak wujud ini, dan prop tidak berubah, jadi klik yang sama, kandungan amaran masih kandungan sebelumnya

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

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

	return (<button onClick= {
		handleClick
	}

	>Follow</button>)
}

Ringkasan

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>
	}
}

Kedua-dua komponen mempunyai kelebihan dan kelemahan tersendiri

Sintaks komponen fungsi adalah lebih pendek dan ringkas, yang menjadikan ia lebih Mudah untuk membangunkan, memahami dan menguji komponen kelas juga boleh mengelirukan kerana penggunaan meluas ini

Penggunaan prestasi komponen kelas adalah agak besar, kerana komponen kelas perlu mencipta contoh komponen kelas dan tidak boleh dimusnahkan.

Komponen berfungsi mempunyai penggunaan prestasi yang rendah kerana komponen berfungsi tidak perlu membuat kejadian ia dilaksanakan semasa pemaparan, dan semua komponen perantaraan dimusnahkan secara langsung selepas mendapat unsur tindak balas yang dikembalikan. [Cadangan berkaitan: Tutorial video Redis

]

Atas ialah kandungan terperinci Apakah kelebihan komponen fungsi tindak balas berbanding komponen kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!