React 元件（函數、類元件）

文章目錄

• 元件與子產品概念
• React 元件介紹
• • 函數元件
  • 類元件
  • 二者差別
  • 元件的執行個體

元件與子產品概念

子產品：

了解：向外提供特定功能的 js程式, 一般就是一個 js檔案

為什麼要拆成子產品：随着業務邏輯增加，代碼越來越多且複雜

作用：複用 js, 簡化 js的編寫, 提高 js運作效率

元件：

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

為什麼要用元件： 一個界面的功能更複雜

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

子產品化： 當應用的js都以子產品來編寫的, 這個應用就是一個子產品化的應用

元件化： 當應用是以多元件的方式實作, 這個應用就是一個元件化的應用

React ：元素構成元件(複雜的元件由多個元件構成)，元件又構成應用。

React核心思想是元件化，其中元件通過 屬性(props) 和 狀态(state) 傳遞資料。

React 元件介紹

React元件可以将UI切分成一些獨立的、可複用的部件， 這樣有助于設計人員專注于建構每一個單獨的部件。盡管React元件與JSX代碼實作的功能基本一緻，但從設計角度上講還是推薦使用React元件方式。原因是：将React元件和Props結合使用可以實作更靈活的功能

• React通過元件的思想，将界面拆分成一個個可複用的子產品，每一個子產品就是一個React 元件。一個React應用由若幹元件組合而成，一個複雜元件也可以由若幹簡單元件組合而成。
• React 元件可以用好幾種方式聲明，可以是一個包含 render()方法的類，也可以是一個簡單的函數，不管怎麼樣，它都是以props作為輸入，傳回 React 元素作為輸出。
• React文法是基于版本ECMAScript6實作的。是以，React元件除了通過JavaScript函數形式實作，還可以通過ES6 Class(類)的形式來實作。

函數元件

JavaScript 函數建構的元件一定是無狀态元件。它能傳入props和context兩個參數，沒有state，除了render()，沒有其它生命周期方法。但正是這樣，函數元件才更加專注和單一，它隻是一個傳回React 元素的函數，隻關注對應UI的展現。函數元件接收外部傳入的props，傳回對應UI的DOM描述。

const reactDiv=document.getElementById('react-div');
//定義一個函數（元件） 函數名首字母必須大寫
function HelloReact(){
	console.log(this); //此處的this是undefined，因為babel編譯後開啟了嚴格模式
    return <div>
       		   <h2>React元件：</h2>
               <p>我是函數元件</p>
           </div>
}
//DOM的渲染
ReactDOM.render(<HelloReact/>,reactDiv);
           

ReactDOM.render()作用：

• React解析元件标簽，找到了HelloReact元件。
• 發現元件是使用函數定義的，随後調用該函數，将傳回的虛拟DOM轉為真實DOM，随後呈現在頁面中。

類元件

相比于函數式元件功能更強大。它有state，以及不同的生命周期方法，可以讓開發者能夠在元件的不同階段（挂載、更新、解除安裝），對元件做更多的控制。類元件可能是無狀态元件，也可能是有狀态元件

//定義類：必須是React.Componet類的子類,類名的首字母必須大寫
class HelloReact extends React.Component{
    render() {
       return <div>
                <label>姓名：
                      <input type="text" />
                      </label>
              </div>
    }
    //1、render是放在哪裡的？—— HelloReact的原型對象上，供執行個體使用。
	//2、render中的this是誰？—— HelloReact的執行個體對象 <=> HelloReact元件執行個體對象。
}
//元件渲染        
ReactDOM.render(<HelloReact/>,document.getElementById('react-div')); 
           

ReactDOM.render()作用：

• React解析元件标簽，找到了HelloReact元件。
• 發現元件是使用類定義的，随後new出來該類的執行個體，并通過該執行個體調用到原型上的render方法。
• 将render傳回的虛拟DOM轉為真實DOM，随後呈現在頁面中。

強調：

• 元件名(函數名)的首字母必須大寫
• 虛拟的DOM隻能有一個根元素
• 虛拟的DOM必須有結束标簽

  <br/>

  、

  <input type='text' />

二者差別

函數元件:

1. 使用 js函數 建立元件
2. 函數名稱必須以大寫字母開頭( React 據此區分 元件 和 普通的React 元素)
3. 函數元件必須有傳回值,表示該元件的結構
4. 若傳回值為null,表示不渲染任何内容
5. 渲染函數元件：用函數名作為元件标簽名,元件标簽可以是單标簽也可以是雙标簽

類元件:

1. 使用 ES6的class 建立的元件
2. 類名稱必須以大寫字母開頭
3. 類元件應該繼承React.Component父類,進而可以使用父類中提供的方法或屬性
4. 類元件必須提供render()方法
5. render()方法必須有傳回值,表示該元件的結構

元件的執行個體

React 元件是一個函數或類，實際工作時，發揮作用的是React 元件的執行個體對象。隻有元件執行個體化後，每一個元件執行個體才有了自己的props和state，才持有對它的DOM節點和子元件執行個體的引用。

在傳統的面向對象的開發方式中，執行個體化的工作是由開發者自己手動完成的，但在React中，元件的執行個體化工作是由React自動完成的，元件執行個體也是直接由React管理的。換句話說，開發者完全不必關心元件執行個體的建立、更新和銷毀。

在類元件中的執行個體，就是用 this 引用的那個對象，對于儲存本地狀态以及介入生命周期函數是有用的。