React 函數式組件和類式組件詳情

Posted on by

前言

React 是 組件化的 的 JS 庫，組件化 也是 React 的核心思想。使用 React 可以構建管理自身狀態的封裝組件，然後對其組合以構成復雜的 UI。那麼什麼是組件呢？ 組件是用來實現局部功能效果的代碼和資源的集合，包括 html / css / js/ image 等，組件的作用是 簡化代碼、復用代碼、提高運行效率。

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

  • 函數式組件 => 基於函數；
  • 類式組件 => 基於類；

1. 函數式組件

函數式組件是基於使用 function 定義的函數，函數式組件 和 普通函數 最主要的區別在 調用的時候，函數式組件在渲染的時候沒有 被人為顯式調用，而是由 React 內部去調用。來看個例子：

<!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轉為js -->
	<script type="text/javascript" src="./babel.min.js"></script>

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

我們先創建一個盒子，用 id 進行唯一標識：

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

引入 react 依賴庫，接著在 script 中先 創建一個函數式組件：

//1. 創建函數式組件
function MyComponent(){
	return <h2>我是函數式組件</h2>
}

然後 渲染組件到頁面：

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

  來分析一下，在執行瞭 ReactDOM.render(<MyComponent/>,...) 之後，react 做瞭哪些事情呢：

  • (1) react 先解析組件標簽 id ==> demo，通過標簽 找到瞭 MyComponent 組件；
  • (2) react 發現組件是函數定義的，接著 調用 這個函數；
  • (3) react 將函數返回的 虛擬 DOM 轉換為 真實DOM;
  • (4) 最後呈現在頁面中；

2. 類式組件

類式組件是基於使用 class 定義的類，需要繼承自 React.Component；另外，類式組件中必須實現 render函數。

來看個例子：

<!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轉為js -->
	<script type="text/javascript" src="./babel.min.js"></script>

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

同樣，我們先創建一個盒子，用 id 進行唯一標識：

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

引入 react 依賴庫，接著在 script 中 創建一個類式組件：

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

然後 渲染組件到頁面：

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

不難發現，類式組件 和 函數式組件 不同的地方就是在創建組件的地方，而在渲染的時候則是一樣。同樣來來分析一下，在執行瞭 ReactDOM.render(<MyComponent/>,...) 之後，react 做瞭哪些事情呢：

  • (1) react 先解析組件標簽 id ==> function，通過標簽 找到瞭 MyComponent 組件；
  • (2) react 發現組件是用類定義的，接著 new 一個該類的實例；
  • (3) react 通過該實例 調用 到類原型上的 render 方法；
  • (3) react 將 render 返回的 虛擬 DOM 轉換為 真實DOM;
  • (4) 最後呈現在頁面中；

到此這篇關於React 函數式組件和類式組件詳情的文章就介紹到這瞭,更多相關React 組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：