資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時裝研究
法律研究ReactJS 中的功能元件與類元件
功能元件或無狀態元件是使用 JavaScript 函式返回 JSX 程式碼或 HTML 程式碼的基本語法，是最廣泛使用的元件型別。
它們被稱為無狀態元件，因為它們接受資料並相應地顯示資料，並且主要負責渲染 UI。
示例
import React from ‘react’;
const App=()=>{
return (
<div>
<h1>TutorialsPoint</h1>
</div>
)
}
export default App輸出
基於類或狀態元件是擴充套件了 React 庫的元件類的 ES6 類。它們被稱為狀態元件，因為它們負責實現邏輯。它具有 React 生命週期包括渲染、安裝、更新和解除安裝階段的不同階段。
示例
import React from 'react';
class App extends React.Component{
render() {
return (
<div>
<h1>TutorialsPoint</h1>
</div>
)
}
}
export default App輸出
功能元件和基於類的元件的區別
| 基於類的元件 | 功能元件 |
|---|---|
| 必須有 render() 方法。 | 沒有 render() 方法。 |
| 使用了 React 生命週期方法（例如 componentDidMount 等）。 | React 鉤子作為傳統 React 生命週期方法的更好的替代方案而存在。 |
| 有更多的程式碼，因此可讀性較低。 | 有較少的程式碼，因此可讀性更高。 |
更新於:2021 年 3 月 18 日
2K+ 瀏覽
廣告