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

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 kelas:

2 Pengurusan negeri

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

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

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

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

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

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

5 Dapatkan nilai yang diberikan

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

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

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

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!