溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

React函數(shù)式組件和類式組件怎么使用

發(fā)布時(shí)間：2022-08-04 10:19:16 來源：億速云 閱讀：208 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“React函數(shù)式組件和類式組件怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

前言

React 是 組件化的 的 JS 庫，組件化 也是 React 的核心思想。使用 React 可以構(gòu)建管理自身狀態(tài)的封裝組件，然后對(duì)其組合以構(gòu)成復(fù)雜的 UI。那么什么是組件呢？ 組件是用來實(shí)現(xiàn)局部功能效果的代碼和資源的集合，包括 html / css / js/ image 等，組件的作用是 簡(jiǎn)化代碼、復(fù)用代碼、提高運(yùn)行效率。

React 里主要有兩種類型的組件：

  • 函數(shù)式組件 => 基于函數(shù)；

  • 類式組件 => 基于類；

1. 函數(shù)式組件

函數(shù)式組件是基于使用 function 定義的函數(shù)，函數(shù)式組件 和 普通函數(shù) 最主要的區(qū)別在 調(diào)用的時(shí)候，函數(shù)式組件在渲染的時(shí)候沒有 被人為顯式調(diào)用，而是由 React 內(nèi)部去調(diào)用。來看個(gè)例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React函數(shù)式組件</title>
</head>
<body>
	<div id="demo"></div>
	
	<!-- 引入react核心庫 -->
	<script type="text/javascript" src="./react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="./react-dom.development.js"></script>
	<!-- 引入babel，用于將jsx轉(zhuǎn)為js -->
	<script type="text/javascript" src="./babel.min.js"></script>

	<script type="text/babel">
		//1. 創(chuàng)建函數(shù)式組件
		function MyComponent(){
			return <h3>我是函數(shù)式組件</h3>
		}
		//2. 渲染組件到頁面
		ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
	</script>
</body>
</html>

我們先創(chuàng)建一個(gè)盒子，用 id 進(jìn)行唯一標(biāo)識(shí)：

<div id="demo"></div>

引入 react 依賴庫，接著在 script 中先 創(chuàng)建一個(gè)函數(shù)式組件：

//1. 創(chuàng)建函數(shù)式組件
function MyComponent(){
	return <h3>我是函數(shù)式組件</h3>
}

然后 渲染組件到頁面：

//2. 渲染組件到頁面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))

&emsp; 來分析一下，在執(zhí)行了 ReactDOM.render(<MyComponent/>,...) 之后，react 做了哪些事情呢：

  • (1) react 先解析組件標(biāo)簽 id ==> demo，通過標(biāo)簽 找到了 MyComponent 組件；

  • (2) react 發(fā)現(xiàn)組件是函數(shù)定義的，接著 調(diào)用 這個(gè)函數(shù)；

  • (3) react 將函數(shù)返回的 虛擬 DOM 轉(zhuǎn)換為 真實(shí)DOM;

  • (4) 最后呈現(xiàn)在頁面中；

2. 類式組件

類式組件是基于使用 class 定義的類，需要繼承自 React.Component；另外，類式組件中必須實(shí)現(xiàn) render函數(shù)。

來看個(gè)例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React類式組件</title>
</head>
<body>
	<div id="demo"></div>
	
	<!-- 引入react核心庫 -->
	<script type="text/javascript" src="./react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="./react-dom.development.js"></script>
	<!-- 引入babel，用于將jsx轉(zhuǎn)為js -->
	<script type="text/javascript" src="./babel.min.js"></script>

	<script type="text/babel">
		//1. 創(chuàng)建類式組件
		class MyComponent extends React.Component {
			render(){
				return <h3>我是類式組件</h3>
			}
		}
		//2. 渲染組件到頁面
		ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
	</script>
</body>
</html>

同樣，我們先創(chuàng)建一個(gè)盒子，用 id 進(jìn)行唯一標(biāo)識(shí)：

<div id="demo"></div>

引入 react 依賴庫，接著在 script 中 創(chuàng)建一個(gè)類式組件：

//1. 創(chuàng)建類式組件
class MyComponent extends React.Component {
	render(){
		return <h3>我是類式組件</h3>
	}
}

然后 渲染組件到頁面：

//2. 渲染組件到頁面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))

不難發(fā)現(xiàn)，類式組件 和 函數(shù)式組件 不同的地方就是在創(chuàng)建組件的地方，而在渲染的時(shí)候則是一樣。同樣來來分析一下，在執(zhí)行了 ReactDOM.render(<MyComponent/>,...) 之后，react 做了哪些事情呢：

  • (1) react 先解析組件標(biāo)簽 id ==> function，通過標(biāo)簽 找到了 MyComponent 組件；

  • (2) react 發(fā)現(xiàn)組件是用類定義的，接著 new 一個(gè)該類的實(shí)例；

  • (3) react 通過該實(shí)例 調(diào)用 到類原型上的 render 方法；

  • (3) react 將 render 返回的 虛擬 DOM 轉(zhuǎn)換為 真實(shí)DOM;

  • (4) 最后呈現(xiàn)在頁面中。

“React函數(shù)式組件和類式組件怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手