React組件化學習入門教程講解
模塊化
模塊
理解：向外提供特定功能的js程序,一般就是一個js文件。
為什么：要拆成模塊，隨著業(yè)務邏輯增加,代碼越來越多且復雜。
作用：復用js,簡化js的編寫,提高js運行效率。
模塊化
當應用的js都以模塊來編寫,這個應用就是一個模塊化的應用
組件化
組件
理解：用來實現局部功能效果的代碼和資源的集合(html/css/js/img等等)
為什么：要用組件，一個界面的功能復雜
作用：復用編碼,簡化項目編碼,提高運行效率
組件化
當應用是以多組件的方式實現,這個應用就是組件化的應用
函數式組件
實質：一個 React 應用就是構建在 React 組件之上的。
函數組件：該函數是一個有效的 React 組件，因為它接收唯一帶有數據的 “?props?”（代表屬性）對象與并返回一個 React 元素。這類組件被稱為“函數組件”，因為它本質上就是 JavaScript 函數。
創(chuàng)建函數組件
function HelloPerson(){
return <h1>你好，我是函數式組件!</h1>;
}
ReactDOM.render(<HelloPerson/>,document.getElementById('root'));說明：解析組件標簽HelloPerson，發(fā)現組件是函數定義的，調用該函數，將返回的虛擬DOM，轉為真實的DOM，隨后呈現在頁面上。
Props參數傳遞（重點）
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'));復合函數組件
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ā)現組件是使用類定義的，隨后new出來該類的實例，并通過該實例調用到原型上的render方法。
將render返回的虛擬DOM轉為真實DOM，隨后呈現在頁面中。
創(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"));到此這篇關于React組件化學習入門教程講解的文章就介紹到這了,更多相關React組件化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React Native中導航組件react-navigation跨tab路由處理詳解
這篇文章主要給大家介紹了關于React Native中導航組件react-navigation跨tab路由處理的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-10-10
react中的ref類似于vue中的ref,都是可以操作dom的,這篇文章我們通過一個demo來學習這個屬性,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
在Rust中,Trait是一個核心概念,它允許我們定義類型應該具有的行為,本文就來具體介紹一下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)建并引用頁面局部組件的方式,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
在項目開發(fā)過程中,對于復雜的業(yè)務選擇功能很常見,下面這篇文章主要給大家介紹了關于React創(chuàng)建對話框組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了react 不用插件實現數字滾動的效果示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
Hello?React的組件化方式之React入門小案例演示
這篇文章主要介紹了Hello?React的組件化方式-React入門小案例,本文通過Hello?React的案例,?來體驗一下React開發(fā)模式,?以及jsx的語法，需要的朋友可以參考下2022-10-10