使用react定義組件的兩種方式

react組件的兩種方式：函數定義，類定義

在定義一個組件之前，首先要明白一點：react元素（jsx）是react組件的最基本的組成單位

組件要求：

1，為了和react元素進行區分，組件名字首必須大寫

2、組件定以后，可以像jsx元素一樣使用

 

首先要導入React 和 ReactDOM：

import React from 'react';

第一種 函數定義一個組件：

import React from 'react';

function Ws(){
  return <p>我是一個函數定義的組件</p>;
}
ReactDOM.render(<Ws/>,window.root);

定義 好的<Ws/>是<Ws></Ws>的簡寫 就是一個虛擬dom，是一個對象類型，里面包含定義組件時的一些值。

當使用函數定義好一個組件，使用ReactDOM.render函數將 (組件 :虛擬dom)轉成真實的dom，並插入到頁面。

第二中 使用類定義一個組件：

使用class定義組件的時候，首先要先從react中解構出React.Component,並繼承它

import React {Component} from 'react';//解構React.Component

class He extends Component{ //繼承Component，Component相當於React.Component 
 render(){ 
    return <div>我是class定義的一個組件</div>
  } 
}

 

當組件是一個類定義的時候，執行ReactDOM.render函數的原理：

1、首先找到組件對應的類，並new了這個類的一個實例

2、通過實例找到原型上的render函數，讓render執行

3、ReactDOM.render接收到原型上render函數retrun的虛擬的dom

4、將虛擬dom轉換成真實dom，插入到頁面中

 

函數式組件是靜態組件：和執行普通方法一樣，調取一次組件，就把組件中的內容獲取到，插入到頁面中，如果不重復調取組件，顯示的內容不會發生任何改變

 一般組件中的內容不會再次改變的情況下，會使用函數式組件

 

詳解組件的運行機制：

create-element在處理的時候，遇到一個組件，返回的對象中：type就不在是字符串標簽名了，而是一個函數（類），但是屬性還是存在props中

 

 rander渲染的時候，首先判斷type的類型，如果是字符串就創建一個元素標簽，如果是函數或者類，就把函數執行，把props中的每一項（包含children）傳遞給函數，在執行函數的時候，把函數中return的JSX通過create-element轉換為新的對象，把這個對象返回，再通過render渲染方式，創建dom元素，插入到容器中

 調取組件的方法：

ReactDOM.render(
<div>
 <Hes title='首頁' style={{color:'red'}}/>,//單閉合  注意：這里的style是傳遞到組件后調用才能起到效果的
 <Hes></He > //雙閉合
</div>

window.root);

import React from 'react';
function Hes(props){ //props變量存儲的值是一個對象，沒有傳遞是個空對象
   let {title,style}=props; //結構傳遞的屬性值  
  return <p style={style}>{title}</p>;//首頁
}
這里注意是是：凡是以props傳遞的屬性都是在組件中調用才能起到效果

單閉合和雙閉合的區別

雙閉合可以寫子孫元素

 獲取子組件：

React.Children.map(children){

   return childern

}

React.Children有很多處理數組的方法