React?函數(shù)式組件和類式組件詳情
前言
React 是 組件化的 的 JS 庫，組件化 也是 React 的核心思想。使用 React 可以構(gòu)建管理自身狀態(tài)的封裝組件，然后對其組合以構(gòu)成復(fù)雜的 UI。那么什么是組件呢？ 組件是用來實現(xiàn)局部功能效果的代碼和資源的集合，包括 html / css / js/ image 等，組件的作用是 簡化代碼、復(fù)用代碼、提高運行效率。
React 里主要有兩種類型的組件：
- 函數(shù)式組件 => 基于函數(shù)；
- 類式組件 => 基于類；
1. 函數(shù)式組件
函數(shù)式組件是基于使用 function 定義的函數(shù)，函數(shù)式組件 和 普通函數(shù) 最主要的區(qū)別在 調(diào)用的時候，函數(shù)式組件在渲染的時候沒有 被人為顯式調(diào)用，而是由 React 內(nèi)部去調(diào)用。來看個例子：
<!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 <h2>我是函數(shù)式組件</h2>
}
//2. 渲染組件到頁面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
</script>
</body>
</html>我們先創(chuàng)建一個盒子，用 id 進行唯一標識：
<div id="demo"></div>
引入 react 依賴庫，接著在 script 中先 創(chuàng)建一個函數(shù)式組件：
//1. 創(chuàng)建函數(shù)式組件
function MyComponent(){
return <h2>我是函數(shù)式組件</h2>
}然后 渲染組件到頁面：
//2. 渲染組件到頁面
ReactDOM.render(<MyComponent/>,document.getElementById('demo')) 來分析一下，在執(zhí)行了 ReactDOM.render(<MyComponent/>,...) 之后，react 做了哪些事情呢：
- (1) react 先解析組件標簽
id ==> demo，通過標簽 找到了MyComponent組件； - (2) react 發(fā)現(xiàn)組件是函數(shù)定義的，接著 調(diào)用 這個函數(shù)；
- (3) react 將函數(shù)返回的 虛擬 DOM 轉(zhuǎn)換為 真實DOM;
- (4) 最后呈現(xiàn)在頁面中；
2. 類式組件
類式組件是基于使用 class 定義的類，需要繼承自 React.Component；另外，類式組件中必須實現(xiàn) render函數(shù)。
來看個例子：
<!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 <h2>我是類式組件</h2>
}
}
//2. 渲染組件到頁面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
</script>
</body>
</html>同樣，我們先創(chuàng)建一個盒子，用 id 進行唯一標識：
<div id="demo"></div>
引入 react 依賴庫，接著在 script 中 創(chuàng)建一個類式組件：
//1. 創(chuàng)建類式組件
class MyComponent extends React.Component {
render(){
return <h2>我是類式組件</h2>
}
}然后 渲染組件到頁面：
//2. 渲染組件到頁面
ReactDOM.render(<MyComponent/>,document.getElementById('demo'))不難發(fā)現(xiàn)，類式組件 和 函數(shù)式組件 不同的地方就是在創(chuàng)建組件的地方，而在渲染的時候則是一樣。同樣來來分析一下，在執(zhí)行了 ReactDOM.render(<MyComponent/>,...) 之后，react 做了哪些事情呢：
- (1) react 先解析組件標簽
id ==> function，通過標簽 找到了MyComponent組件； - (2) react 發(fā)現(xiàn)組件是用類定義的，接著 new 一個該類的實例；
- (3) react 通過該實例 調(diào)用 到類原型上的
render方法； - (3) react 將
render返回的 虛擬 DOM 轉(zhuǎn)換為 真實DOM; - (4) 最后呈現(xiàn)在頁面中；
到此這篇關(guān)于React 函數(shù)式組件和類式組件詳情的文章就介紹到這了,更多相關(guān)React 組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
MobX 是一個簡潔的狀態(tài)管理庫,它通過透明的函數(shù)響應(yīng)式編程（TFRP）使得狀態(tài)管理變得簡單和可擴展,下面就跟隨小編一起來了解一下如何在React函數(shù)式組件中使用MobX吧2024-01-01
這篇文章主要介紹了React項目中使用Redux的?react-redux，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家介紹了基于antd的autocomplete的二次封裝查詢示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要給大家介紹了關(guān)于react-native滑動吸頂效果的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用react-native具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理
這篇文章主要為大家介紹了一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
關(guān)于hooks中useEffect()的使用總結(jié)
這篇文章主要介紹了關(guān)于hooks中useEffect()的使用總結(jié),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
本文主要介紹了React中井字棋游戲的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了詳解react的兩種動態(tài)改變css樣式的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
錨點目錄定位功能在長頁面和文檔類網(wǎng)站中非常常見,它可以讓用戶快速定位到頁面中的某個章節(jié),本文講給大家介紹一下React項目中如何實現(xiàn)一個簡單的錨點目錄定位,文中有詳細的實現(xiàn)代碼,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了React 狀態(tài)的不變性實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11