淺析React自定義函數組件和class組件的用法

時間 2020-05-22

標籤淺析 react 自定義函數組件 class 用法欄目 React 简体版

原文原文鏈接

一、React組件化概念

1.一、組件的概念

React 應用都是構建在組件之上。javascript

組件做爲React的核心內容，是View的重要組成部分，每個View頁面都由一個或多個組件構成，能夠說組件是React應用程序的基石。在React的組件構成中，按照狀態來分能夠分爲有狀態組件和無狀態組件。前端

1.二、組件的特色

組件化的概念在後端早已存在多年，只不過近幾年隨着前端的發展，這個概念在前端開始被頻繁說起，特別是在MV*的框架中。java

前端中的「組件化」這個詞，在UI這一層一般指「標籤化」，也就是把大塊的業務界面，拆分紅若干小塊，而後進行組裝。react

狹義的組件化通常是指標籤化，也就是以自定義標籤（自定義屬性）爲核心的機制。後端

廣義的組件化包括對數據邏輯層業務梳理，造成不一樣層級的能力封裝。數組

標準性框架

任何一個組件都應該遵照一套標準，可使得不一樣區域的開發人員據此標準開發出一套標準統一的組件。dom
組合性函數

組件以前應該是能夠組合的。咱們知道前端頁面的展現都是一些HTML DOM的組合，而組件在最終形態上也能夠理解爲一個個的HTML片斷。那麼組成一個完整的界面展現，確定是要依賴不一樣組件之間的組合，嵌套以及通訊。組件化
重用性

任何一個組件應該都是一個能夠獨立的個體，可使其應用在不一樣的場景中。
可維護性

任何一個組件應該都具備一套本身的完整的穩定的功能，僅包含自身的，與其它組件無關的邏輯，使其更加的容易理解，使其更加的容易理解，同時大大減小發生bug的概率。

二、自定義組件

2.一、函數組件

無狀態函數式組件形式上表現爲一個只帶有一個 render() 方法的組件類，經過函數形式或者 ES6 箭頭 function的形式在建立，而且該組件是無state狀態的。具體的建立形式以下

import React from 'react';

//定義一個React組件
function App() {
  return (
    <div>
      hello React...
    </div>
  );
}

export default App;

2.二、class組件

React.Component 是以 ES6 的形式來建立react的組件的，是React目前極爲推薦的建立有狀態組件的方式，形式改成 React.Component 形式以下

import React from 'react';

//定義一個React組件
class App extends React.Component{
  render(){
    return (
      <div>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

在其餘文件中引用組件

import React from 'react';
import ReactDOM from 'react-dom';
//App組件，組件要求大寫字母開頭
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));