React組件化學(xué)習(xí)入門教程講解
模塊化
模塊
理解：向外提供特定功能的js程序,一般就是一個(gè)js文件。
為什么：要拆成模塊，隨著業(yè)務(wù)邏輯增加,代碼越來越多且復(fù)雜。
作用：復(fù)用js,簡(jiǎn)化js的編寫,提高js運(yùn)行效率。
模塊化
當(dāng)應(yīng)用的js都以模塊來編寫,這個(gè)應(yīng)用就是一個(gè)模塊化的應(yīng)用
組件化
組件
理解：用來實(shí)現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/img等等)
為什么：要用組件，一個(gè)界面的功能復(fù)雜
作用：復(fù)用編碼,簡(jiǎn)化項(xiàng)目編碼,提高運(yùn)行效率
組件化
當(dāng)應(yīng)用是以多組件的方式實(shí)現(xiàn),這個(gè)應(yīng)用就是組件化的應(yīng)用
函數(shù)式組件
實(shí)質(zhì)：一個(gè) React 應(yīng)用就是構(gòu)建在 React 組件之上的。
函數(shù)組件：該函數(shù)是一個(gè)有效的 React 組件，因?yàn)樗邮瘴ㄒ粠в袛?shù)據(jù)的 “?props?”（代表屬性）對(duì)象與并返回一個(gè) React 元素。這類組件被稱為“函數(shù)組件”，因?yàn)樗举|(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)為真實(shí)的DOM，隨后呈現(xiàn)在頁(yè)面上。
Props參數(shù)傳遞（重點(diǎn)）
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出來該類的實(shí)例，并通過該實(shí)例調(diào)用到原型上的render方法。
將render返回的虛擬DOM轉(zhuǎn)為真實(shí)DOM，隨后呈現(xiàn)在頁(yè)面中。
創(chuàng)建實(shí)例
//創(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React中組件之間通信的方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
解決React報(bào)錯(cuò)JSX?element?type?does?not?have?any?construct
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)JSX?element?type?does?not?have?any?construct?or?call?signatures，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本篇文章主要介紹了深入理解React高階組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了深入理解react 組件類型及使用場(chǎng)景，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
React星星評(píng)分組件的實(shí)現(xiàn)
評(píng)分插件在購(gòu)物的應(yīng)用中經(jīng)?？梢钥吹玫?，但是用著別人的總是沒有自己寫的順手，本文就使用React實(shí)現(xiàn)星星評(píng)分組件，感興趣的可以了解一下2021-06-06
詳解React-Native全球化多語(yǔ)言切換工具庫(kù)react-native-i18n
這篇文章主要介紹了詳解React-Native全球化語(yǔ)言切換工具庫(kù)react-native-i18n,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
在fiber出現(xiàn)之前，react的架構(gòu)體系只有協(xié)調(diào)器reconciler和渲染器render。當(dāng)前有新的update時(shí)，react會(huì)遞歸所有的vdom節(jié)點(diǎn)，如果dom節(jié)點(diǎn)過多，會(huì)導(dǎo)致其他事件影響滯后，造成卡頓。即之前的react版本無法中斷工作過程，一旦遞歸開始無法停留下來2023-02-02
webpack+react+antd腳手架優(yōu)化的方法
本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
react16.8.0以上MobX在hook中的使用方法詳解
這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
本篇文章主要介紹了React復(fù)制到剪貼板的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08