React組件化學(xué)習(xí)入門教程講解
模塊化
模塊
理解:向外提供特定功能的js程序,一般就是一個js文件。
為什么:要拆成模塊,隨著業(yè)務(wù)邏輯增加,代碼越來越多且復(fù)雜。
作用:復(fù)用js,簡化js的編寫,提高js運行效率。
模塊化
當(dāng)應(yīng)用的js都以模塊來編寫,這個應(yīng)用就是一個模塊化的應(yīng)用
組件化
組件
理解:用來實現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/img等等)
為什么:要用組件,一個界面的功能復(fù)雜
作用:復(fù)用編碼,簡化項目編碼,提高運行效率
組件化
當(dāng)應(yīng)用是以多組件的方式實現(xiàn),這個應(yīng)用就是組件化的應(yīng)用
函數(shù)式組件
實質(zhì):一個 React 應(yīng)用就是構(gòu)建在 React 組件之上的。
函數(shù)組件:該函數(shù)是一個有效的 React 組件,因為它接收唯一帶有數(shù)據(jù)的 “?props?”(代表屬性)對象與并返回一個 React 元素。這類組件被稱為“函數(shù)組件”,因為它本質(zhì)上就是 JavaScript 函數(shù)。
創(chuàng)建函數(shù)組件
function HelloPerson(){ return <h1>你好,我是函數(shù)式組件!</h1>; } ReactDOM.render(<HelloPerson/>,document.getElementById('root'));
說明:解析組件標(biāo)簽HelloPerson,發(fā)現(xiàn)組件是函數(shù)定義的,調(diào)用該函數(shù),將返回的虛擬DOM,轉(zhuǎn)為真實的DOM,隨后呈現(xiàn)在頁面上。
Props參數(shù)傳遞(重點)
function HelloPerson(person){ console.log(this);//此處undefined babel編譯后采取嚴(yán)格模式 return ( <ul> <li>姓名:{person.name}</li> <li>年齡:{person.age}</li> </ul> ) } ReactDOM.render(<HelloPerson name='張三' age={18}/>,document.getElementById('root'));
復(fù)合函數(shù)組件
function GetName(props){ return <li>姓名:{props.name}</li> } function GetAge(props){ return <li>年齡:{props.age}</li> } function HelloPerson(person){ return ( <ul> <GetName name={person.name}/> <GetAge age={person.age}/> </ul> ) } ReactDOM.render(<HelloPerson name='張三' age={18}/>,document.getElementById('root'));
類式組件
ES6 的 class 來定義組件,通過繼承React.Component。解析流程如下:
React解析組件標(biāo)簽,找到了MyComponent組件。
發(fā)現(xiàn)組件是使用類定義的,隨后new出來該類的實例,并通過該實例調(diào)用到原型上的render方法。
將render返回的虛擬DOM轉(zhuǎn)為真實DOM,隨后呈現(xiàn)在頁面中。
創(chuàng)建實例
//創(chuàng)建類組件 1:繼承react中的Component類 2:需要render class Person extends React.Component{ render(){ return ( <h1>你好,我是類式組件!</h1> ) } } ReactDOM.render(<Person/>,document.getElementById("root"));
用戶自定義組件
const element = <Person/> ReactDOM.render(element,document.getElementById("root"));
到此這篇關(guān)于React組件化學(xué)習(xí)入門教程講解的文章就介紹到這了,更多相關(guān)React組件化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決React報錯JSX?element?type?does?not?have?any?construct
這篇文章主要為大家介紹了解決React報錯JSX?element?type?does?not?have?any?construct?or?call?signatures,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12詳解React-Native全球化多語言切換工具庫react-native-i18n
這篇文章主要介紹了詳解React-Native全球化語言切換工具庫react-native-i18n,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11webpack+react+antd腳手架優(yōu)化的方法
本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04react16.8.0以上MobX在hook中的使用方法詳解
這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07