React組件化學(xué)習(xí)入門教程講解
模塊化
模塊
理解：向外提供特定功能的js程序,一般就是一個js文件。
為什么：要拆成模塊，隨著業(yè)務(wù)邏輯增加,代碼越來越多且復(fù)雜。
作用：復(fù)用js,簡化js的編寫,提高js運行效率。
模塊化
當應(yīng)用的js都以模塊來編寫,這個應(yīng)用就是一個模塊化的應(yīng)用
組件化
組件
理解：用來實現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/img等等)
為什么：要用組件，一個界面的功能復(fù)雜
作用：復(fù)用編碼,簡化項目編碼,提高運行效率
組件化
當應(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'));說明：解析組件標簽HelloPerson，發(fā)現(xiàn)組件是函數(shù)定義的，調(diào)用該函數(shù)，將返回的虛擬DOM，轉(zhuǎn)為真實的DOM，隨后呈現(xiàn)在頁面上。
Props參數(shù)傳遞（重點）
function HelloPerson(person){
console.log(this);//此處undefined babel編譯后采取嚴格模式
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解析組件標簽，找到了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 Native中導(dǎo)航組件react-navigation跨tab路由處理詳解
這篇文章主要給大家介紹了關(guān)于React Native中導(dǎo)航組件react-navigation跨tab路由處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
react中的ref類似于vue中的ref,都是可以操作dom的,這篇文章我們通過一個demo來學(xué)習(xí)這個屬性,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
在Rust中,Trait是一個核心概念,它允許我們定義類型應(yīng)該具有的行為,本文就來具體介紹一下Rust中Trait的使用,感興趣的可以了解一下,感興趣可以了解一下2024-03-03
這篇文章主要為大家介紹了useState?解決文本框無法輸入的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
解決React報錯Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報錯Expected?`onClick`?listener?to?be?a?function解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
解決React報錯React?Hook?useEffect?has?a?missing?dependency
這篇文章主要為大家介紹了解決React報錯React?Hook?useEffect?has?a?missing?dependency，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React在Dva項目中創(chuàng)建并引用頁面局部組件的方式
這篇文章主要介紹了React在Dva項目中創(chuàng)建并引用頁面局部組件的方式,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
在項目開發(fā)過程中,對于復(fù)雜的業(yè)務(wù)選擇功能很常見,下面這篇文章主要給大家介紹了關(guān)于React創(chuàng)建對話框組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
react 不用插件實現(xiàn)數(shù)字滾動的效果示例
這篇文章主要介紹了react 不用插件實現(xiàn)數(shù)字滾動的效果示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Hello?React的組件化方式之React入門小案例演示
這篇文章主要介紹了Hello?React的組件化方式-React入門小案例,本文通過Hello?React的案例,?來體驗一下React開發(fā)模式,?以及jsx的語法，需要的朋友可以參考下2022-10-10