React 基礎鞏固(十七)——組件化開發(fā)（一）
組件化開發(fā)
- 什么是組件化開發(fā)？
- 分而治之的思想
- 將一個頁面拆分成一個個小的功能塊
- 將應用抽象成一顆組件樹
- React的組件相對于Vue更加的靈活和多樣
- 按照不同的方式可以分為很多類組件
- 根據(jù)
組件的定義方式，分為：函數(shù)組件、類組件 - 根據(jù)
組件內部是否有狀態(tài)需要維護，分為：無狀態(tài)組件、有狀態(tài)組件 - 根據(jù)
組件的不同職責，分為：展示型組件、容器型組件
- 根據(jù)
- 函數(shù)組件、無狀態(tài)組件、展示組件主要關注UI的展示
- 類組件、有狀態(tài)組件、容器組件主要關注數(shù)據(jù)邏輯
- 按照不同的方式可以分為很多類組件
類組件
- 定義
- 組件名稱是大寫字符開頭
- 類組件需繼承自 React.Component
- 類組件必須實現(xiàn)render函數(shù)
- 使用class定義一個組件
- constructor是可選的，通常在constructor中初始化一些數(shù)據(jù)
- this.state中維護的就是我們組件內部的數(shù)據(jù)
- render()方法是class組件中唯一必須實現(xiàn)的方法
import React from "react";
// 1.類組件
class App extends React.Component {
constructor() {
super()
this.state = {
message: 'hello react'
}
}
render() {
const { message } = this.state
return <div>{ message }</div>;
}
}
export default App;
- render函數(shù)的返回值
- 當render被調用時，它會檢查 this.props 和 this.state 的變化并返回以下類型之一：
- React元素（通常通過JSX創(chuàng)建，例如
<div/>會被React渲染為DOM節(jié)點，<MyComponent/>會被React渲染為自定義組件） - 數(shù)組或fragments（使得render方法可以返回多個元素）
- Portals（可以渲染子節(jié)點到不同的DOM子樹中）
- 字符串或數(shù)字類型（在DOM中被渲染為文本節(jié)點）
- 布爾類型或null（什么都不渲染）
- React元素（通常通過JSX創(chuàng)建，例如
- 當render被調用時，它會檢查 this.props 和 this.state 的變化并返回以下類型之一：
函數(shù)組件
- 定義：函數(shù)組件是使用function來進行定義的函數(shù)，只是這個函數(shù)會返回和類組件中render函數(shù)返回一樣的內容
- 特點：
- 沒有生命周期，也會被更新并掛載，但是沒有生命周期函數(shù)
- this關鍵字不能指向組件實例（因為沒有組件實例）
- 沒有內部狀態(tài)（state）
// 函數(shù)式組件
function App() {
// 返回值：和類組件中render函數(shù)返回的一致
return <div>hello react</div>;
}
export default App
文章來源地址http://www.zghlxwxcb.cn/news/detail-521884.html
文章來源：http://www.zghlxwxcb.cn/news/detail-521884.html
到了這里，關于【前端知識】React 基礎鞏固(十七)——組件化開發(fā)（一）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
