React如何創(chuàng)建組件
前言
這節(jié)我們將介紹 React 中組件的類別,以及如何創(chuàng)建和使用組件。
本文會(huì)向你介紹以下內(nèi)容:
- 創(chuàng)建類組件
- 創(chuàng)建函數(shù)組件
- 渲染組件
- 合成組件
- 提取組件
- Props 是只讀的
組件介紹
組件(Components) 讓你可以將用戶界面分成獨(dú)立的,可復(fù)用的小部件,并可以對(duì)每個(gè)部件進(jìn)行單獨(dú)的設(shè)計(jì)。
從定義上來(lái)說(shuō), 組件就像JavaScript的函數(shù)。組件可以接收任意輸入(稱為”props”), 并返回 React 元素,用以描述屏幕顯示內(nèi)容。
Props , 即屬性(Property), 在代碼中寫作 props,故可用 props 指代 properties。
react中有兩種組件:類組件(class components)、函數(shù)組件(function components)
創(chuàng)建類組件
類組件的定義有如下要求:
- 類組件需要繼承自 React.Component
- 類組件必須實(shí)現(xiàn)render函數(shù)
在ES6之前,可以通過(guò)create-react-class 模塊來(lái)定義類組件,但是目前官網(wǎng)建議我們使用ES6的class類定義。
使用class定義一個(gè)組件:
class App extends Component { constructor() { super() this.state = {} } render() { return <h2>Hello App</h2> } }
我們來(lái)詳細(xì)分析一下類組件有哪幾個(gè)部分
- constructor:這是類組件的構(gòu)造函數(shù),是可選的,我們通常在constructor中初始化一些數(shù)據(jù);
- this.state:我們?cè)赾onstructor中給類組件加入state屬性,你可以理解為組件中有一個(gè)state對(duì)象,其中包含著各種屬性,用于維護(hù)組件內(nèi)部的數(shù)據(jù)。同時(shí)你可以通過(guò)this.state.<屬性名>訪問(wèn)該屬性;
- render(): 該方法是 class 組件中唯一必須實(shí)現(xiàn)的方法,類組件通過(guò)render()返回組件的顯示內(nèi)容;
關(guān)于 state
我們可以通過(guò)this.state給類組件添加數(shù)據(jù)對(duì)象,我們可以通過(guò)this.state.<屬性名>去訪問(wèn)我們setState中的屬性。
constructor(props) { super(props); this.state = { name:"xhs-rookies" } } render(){ return <h2>{this.state.name}</h2> }
但是我們想要修改上述例子中的name屬性的時(shí)候,則必須通過(guò)react給我們規(guī)定好的setState()方法,去給state添加或者修改其中的數(shù)值。
this.state.name = 'new xhs-rookies' //錯(cuò)誤的方式,不允許采用 this.setState({ name: 'new xhs-rookies' }) //正確的方式
簡(jiǎn)單點(diǎn)來(lái)說(shuō),在 react 中頁(yè)面是通過(guò)數(shù)據(jù)進(jìn)行渲染,使用setState()更新的數(shù)據(jù),react 會(huì)幫我們執(zhí)行render()去更新頁(yè)面,從而將頁(yè)面中用到 state 中的數(shù)據(jù)全部更新。
關(guān)于 render
當(dāng) render 被調(diào)用時(shí),它會(huì)檢查 this.props 和 this.state 的變化并返回很多類型,很多時(shí)候我們選擇讓該方法返回 React 元素,然后交由 React 去渲染展示:
React 元素:
- 通常通過(guò) JSX 創(chuàng)建。
- 例如,<div/> 會(huì)被 React 渲染為 DOM 節(jié)點(diǎn),<MyComponent/> 會(huì)被 React 渲染為自定義組件;
- 無(wú)論是 <div/> 還是 <MyComponent/> 均為 React 元素。
詳細(xì)關(guān)于 render() 方法的內(nèi)容請(qǐng)見(jiàn)React.Component - Render)
創(chuàng)建函數(shù)組件
函數(shù)組件是使用 function 來(lái)進(jìn)行定義的函數(shù),只是這個(gè)函數(shù)會(huì)返回和類組件中 render 函數(shù)返回一樣的內(nèi)容。
跟類組件相比,函數(shù)組件有自己的特點(diǎn):
- 沒(méi)有生命周期,也會(huì)被更新并掛載,但是沒(méi)有生命周期函數(shù);
- 沒(méi)有 this(組件實(shí)例);
- 沒(méi)有內(nèi)部狀態(tài)(state);
我們來(lái)定義一個(gè)函數(shù)組件:
export default function App() { return <div>xhs rookies</div> }
渲染組件
在前幾篇中, 我們只遇到代表 DOM 標(biāo)簽的 React 元素:
const element = <div />
然而,元素也可以代表用戶定義的組件:
const element = <Welcome name="xhs rookies" />
當(dāng) React 遇到一個(gè)代表用戶定義組件的元素時(shí),它將 JSX 屬性以一個(gè)單獨(dú)對(duì)象的形式傳遞給相應(yīng)的組件。 我們將其稱為 “props” 對(duì)象。
比如, 以下代碼在頁(yè)面上渲染“xhs rookies”:
function Welcome(props) { return <h1>Hello, {props.name}</h1> } const element = <Welcome name="xhs rookies" /> ReactDOM.render(element, document.getElementById('root'))
我們簡(jiǎn)單解釋一下上面這個(gè)例子:
- 我們調(diào)用了 ReactDOM.render() 方法并向其中傳入了 <Welcome name="xhs rookies" /> 元素。
- React 調(diào)用 Welcome 組件,并向其中傳入了 {name: 'xhs rookies'} 作為 props 對(duì)象。
- Welcome 組件返回 <h1>xhs rookies</h1>。
- React DOM 迅速更新 DOM ,使其顯示為 <h1>xhs rookies</h1>。
注意: 組件名稱總是以大寫字母開(kāi)始。
舉例來(lái)說(shuō), <div/> 代表一個(gè) DOM 標(biāo)簽,而 <Welcome/> 則代表一個(gè)組件,并且需要在作用域中有一個(gè) Welcome 組件。
你可以深入 JSX閱讀更多關(guān)于這點(diǎn)背后的原因。
合成組件
組件可以在它們的輸出中引用其它組件。這使得我們可以使用同樣的組件來(lái)抽象到任意層級(jí)。一個(gè)按鈕,一個(gè)表單,一個(gè)對(duì)話框,一個(gè)屏幕:在 React 應(yīng)用中,所有這些都通常描述為組件。
例如,我們可以創(chuàng)建一個(gè) App 組件,并在其內(nèi)部多次渲染 Welcome:
function Welcome(props) { return <h1>Hello, {props.name}</h1> } function App() { return ( <div> <Welcome name="rookie-Sara" /> <Welcome name="rookie-Cahal" /> <Welcome name="rookie-Edite" /> </div> ) } ReactDOM.render(<App />, document.getElementById('root'))
通常,新的 React apps 都有一個(gè)單獨(dú)的頂層 App 組件。然而,如果你在已有的應(yīng)用中整合 React,你可以需要由下至上地, 從類似于 Button 這樣的小組件開(kāi)始, 逐漸整合到視圖層的頂層。
提取組件
不要害怕把一個(gè)組件分為多個(gè)更小的組件。
舉個(gè)例子,思考下名 Comment 組件:
function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name} /> <div className="UserInfo-name">{props.author.name}</div> </div> <div className="Comment-text">{props.text}</div> <div className="Comment-date">{formatDate(props.date)}</div> </div> ) }
它接受 author(一個(gè)對(duì)象),text(一個(gè)字符串)和 date(一個(gè)日期)作為 props。
這個(gè)組件修改起來(lái)很麻煩,因?yàn)樗潜磺短椎?,而且很難復(fù)用其中的某個(gè)部分。讓我們從其中提取一些組件。
首先,提取頭像 Avatar:
function Avatar(props) { return <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> }
Avatar 組件不用關(guān)心它在 Comment 中是如何渲染的。這是為什么我們它的 prop 一個(gè)更通用的屬性名: user, 而不是 author 的原因。
我們建議從組件本身的角度來(lái)命名 props 而不是它被使用的上下文環(huán)境。
我們可以稍微簡(jiǎn)化一下 Comment 組件:
function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <Avatar user={props.author} /> <div className="UserInfo-name">{props.author.name}</div> </div> <div className="Comment-text">{props.text}</div> <div className="Comment-date">{formatDate(props.date)}</div> </div> ) }
接下來(lái),我們提取用戶信息 UserInfo 組件, 用于將 Avatar 顯示在用戶名旁邊:
function UserInfo(props) { return ( <div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name">{props.user.name}</div> </div> ) }
這使我們可以進(jìn)一步簡(jiǎn)化 Comment 組件:
function Comment(props) { return ( <div className="Comment"> <UserInfo user={props.author} /> <div className="Comment-text">{props.text}</div> <div className="Comment-date">{formatDate(props.date)}</div> </div> ) }
提取組件可能看起來(lái)是一個(gè)繁瑣的工作,但是在大型的 Apps 中可以回報(bào)給我們的是大量的可復(fù)用組件。一個(gè)好的經(jīng)驗(yàn)準(zhǔn)則是如果你 UI 的一部分需要用多次 (Button,Panel,Avatar),或者本身足夠復(fù)雜(App,F(xiàn)eedStory,Comment),最好的做法是使其成為可復(fù)用組件。
Props 是只讀的
無(wú)論你用函數(shù)或類的方法來(lái)聲明組件, 它都無(wú)法修改其自身 props. 思考下列 sum (求和)函數(shù):
function sum(a, b) { return a + b }
這種函數(shù)稱為 “純函數(shù)” ,因?yàn)樗鼈儾粫?huì)試圖改變它們的輸入,并且對(duì)于同樣的輸入,始終可以得到相同的結(jié)果。
反之, 以下是非純函數(shù), 因?yàn)樗淖兞俗陨淼妮斎胫担?/p>
function withdraw(account, amount) { account.total -= amount }
雖然 React 很靈活,但是它有一條嚴(yán)格的規(guī)則:
注意: 所有 React 組件都必須是純函數(shù),并禁止修改其自身 props 。
當(dāng)然, 應(yīng)用 UI 總是動(dòng)態(tài)的,并且隨時(shí)有可以改變。
如果我們想要?jiǎng)討B(tài)改變 UI,那么就會(huì)涉及到我們上面說(shuō)到的state(狀態(tài)) 。我們通過(guò)動(dòng)態(tài)的改變state來(lái)渲染整個(gè)頁(yè)面,我們后面會(huì)提及,詳情見(jiàn) 深入理解 setState
到此這篇關(guān)于React如何創(chuàng)建組件的文章就介紹到這了,更多相關(guān)React 創(chuàng)建組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React 組件的狀態(tài)下移和內(nèi)容提升的操作方法
這篇文章主要介紹了React 組件的狀態(tài)下移和內(nèi)容提升,通過(guò)代碼講解了渲染性能的組件問(wèn)題結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-11-11在?React?項(xiàng)目中全量使用?Hooks的方法
這篇文章主要介紹了在?React?項(xiàng)目中全量使用?Hooks,使用 Hooks 能為開(kāi)發(fā)提升不少效率,但并不代表就要拋棄 Class Component,依舊還有很多場(chǎng)景我們還得用到它,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10react跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決
這篇文章主要介紹了react跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03React onClick/onChange傳參(bind綁定)問(wèn)題
這篇文章主要介紹了React onClick/onChange傳參(bind綁定)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02解決React報(bào)錯(cuò)React?Hook?useEffect?has?a?missing?dependency
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)React?Hook?useEffect?has?a?missing?dependency,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12React實(shí)現(xiàn)Excel文件的導(dǎo)出與在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何利用?React?18?的強(qiáng)大功能,演示如何使用?React?18?編寫?Excel?文件的導(dǎo)出與在線預(yù)覽功能,需要的小伙伴可以參考下2023-12-12React實(shí)現(xiàn)歌詞滾動(dòng)效果(跟隨音樂(lè)播放時(shí)間滾動(dòng))
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)歌詞滾動(dòng)效果(跟隨音樂(lè)播放使勁按滾動(dòng)),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2024-02-02