日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React組件化學習入門教程講解_React

作者：小余努力搬磚 ? 更新時間： 2022-11-04 編程語言

模塊化

模塊

理解：向外提供特定功能的js程序,一般就是一個js文件。

為什么：要拆成模塊，隨著業務邏輯增加,代碼越來越多且復雜。

作用：復用js,簡化js的編寫,提高js運行效率。

模塊化

當應用的js都以模塊來編寫,這個應用就是一個模塊化的應用

組件化

組件

理解：用來實現局部功能效果的代碼和資源的集合(html/css/js/img等等)

為什么：要用組件，一個界面的功能復雜

作用：復用編碼,簡化項目編碼,提高運行效率

組件化

當應用是以多組件的方式實現,這個應用就是組件化的應用

函數式組件

實質：一個 React 應用就是構建在 React 組件之上的。

函數組件：該函數是一個有效的 React 組件，因為它接收唯一帶有數據的 “?props?”（代表屬性）對象與并返回一個 React 元素。這類組件被稱為“函數組件”，因為它本質上就是 JavaScript 函數。

創建函數組件

function HelloPerson(){
 return <h1>你好，我是函數式組件!</h1>;
 
}
ReactDOM.render(<HelloPerson/>,document.getElementById('root'));

說明：解析組件標簽HelloPerson，發現組件是函數定義的，調用該函數，將返回的虛擬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組件。

發現組件是使用類定義的，隨后new出來該類的實例，并通過該實例調用到原型上的render方法。

將render返回的虛擬DOM轉為真實DOM，隨后呈現在頁面中。

創建實例

//創建類組件 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"));

原文鏈接：https://yzq-ty.blog.csdn.net/article/details/126685937

欄目分類
最近更新