React?函數(shù)式組件和類式組件詳情
前言
React 是 組件化的 的 JS 庫，組件化 也是 React 的核心思想。使用 React 可以構(gòu)建管理自身狀態(tài)的封裝組件，然后對其組合以構(gòu)成復(fù)雜的 UI。那么什么是組件呢？ 組件是用來實(shí)現(xiàn)局部功能效果的代碼和資源的集合，包括 html / css / js/ image 等，組件的作用是 簡化代碼、復(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 <h2>我是函數(shù)式組件</h2>
}
//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 <h2>我是函數(shù)式組件</h2>
}然后 渲染組件到頁面：
//2. 渲染組件到頁面
ReactDOM.render(<MyComponent/>,document.getElementById('demo')) 來分析一下，在執(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 <h2>我是類式組件</h2>
}
}
//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 <h2>我是類式組件</h2>
}
}然后 渲染組件到頁面：
//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)在頁面中；
到此這篇關(guān)于React 函數(shù)式組件和類式組件詳情的文章就介紹到這了,更多相關(guān)React 組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react?app?rewrited替代品craco使用示例
這篇文章主要為大家介紹了react?app?rewrited替代品craco使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了React 全面解析excel文件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
react?diff?算法實(shí)現(xiàn)思路及原理解析
這篇文章主要介紹了react?diff?算法實(shí)現(xiàn)思路及原理解析,本節(jié)我們正式進(jìn)入基本面試必考的核心地帶?--?diff?算法，了解如何優(yōu)化和復(fù)用?dom?操作的，還有我們常見的?key?的作用,需要的朋友可以參考下2022-05-05
React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法
這篇文章主要介紹了React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了為什么說form元素是React的未來，本文會(huì)帶你聊聊React圍繞form的布局與發(fā)展，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
React中super()和super(props)的區(qū)別小結(jié)
本文主要介紹了React中super()和super(props)的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
這篇文章主要介紹了React Umi國際化配置方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-04-04
在React日常開發(fā)中，我們常常被重復(fù)渲染或無意義渲染所折磨，窮盡腦汁，做各種優(yōu)化：memo、useMemo、useCallback、immutable等，本文主要講述immutable的簡約版Immer，感興趣的同學(xué)可以一起來學(xué)習(xí)2023-05-05
這篇文章主要為大家介紹了useEffect支持async及await的使用方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了關(guān)于react 父子組件的執(zhí)行順序，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09