React組件的概念和屬性介紹

1、React組件化概念

1.1、組件的概念

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

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

1.2、組件的特點

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

前端中的“組件化”這個詞，在UI這一層通常指“標簽化”，也就是把大塊的業務界面，拆分成若干小塊，然后進行組裝。

狹義的組件化一般是指標簽化，也就是以自定義標簽（自定義屬性）為核心的機制。

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

• 標準性

  任何一個組件都應該遵守一套標準，可以使得不同區域的開發人員據此標準開發出一套標準統一的組件。

• 組合性

  組件之前應該是可以組合的。我們知道前端頁面的展示都是一些HTML DOM的組合，而組件在最終形態上也可以理解為一個個的HTML片段。那么組成一個完整的界面展示，肯定是要依賴不同組件之間的組合，嵌套以及通信。

• 重用性

  任何一個組件應該都是一個可以獨立的個體，可以使其應用在不同的場景中。

• 可維護性

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

2、自定義組件

2.1、函數組件

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

import React from 'react';

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

export default App;

2.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'));

2.3、函數組件和class組件的區別

用構造函數創建出來的組件，叫做“無狀態組件”；

用class關鍵字創建出來的組件，叫做“有狀態組件”；

有狀態組件和無狀態組件之間的本質區別是有無state屬性。

注意：

使用class 關鍵字創建的組件，有自己的私有數據（this.state）和生命周期函數；

使用function創建的組件，只有props，沒有自己的私有數據和生命周期函數；

函數組件和類組件當然是有區別的，而且函數組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數組件直接執行函數取返回結果即可。為了提高性能，盡量使用函數組件

3、React組件屬性

3.1、props屬性

react中說的單向數據流值說的就是props，根據這一特點它還有一個作用：組件之間的通信。props本身是不可變的，但是有一種情形它貌似可變，即是將父組件的state作為子組件的props，當父組件的state改變，子組件的props也跟著改變，其實它仍舊遵循了這一定律：props是不可更改的。

props屬性的特點：

1.每個組件對象都會有props（properties的簡寫）屬性

2.組件標簽的所有屬性都保存在props中

3.內部讀取某個屬性值：this.props.propertyName

4.作用：通過標簽屬性從組件外 向組件內傳遞數據（只讀 read only）

5.對props中的屬性值進行類型限制和必要性限制

代碼示例

使用函數組件：

import React from 'react';
import ReactDOM from 'react-dom';

//使用函數組件
function User(props){
    //在組件中獲取props屬性值
    return <div>{props.name}，{props.age}</div>
}

//定義數據
const person ={
    name:'張三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));

使用類組件：

import React from 'react';
import ReactDOM from 'react-dom';

//使用class組件
class User extends React.Component{
    render(){
        return (
    <div>{this.props.name}--{this.props.age}</div>
        );
    }
}

//數據
const person ={
    name:'張三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));

3.2、state 屬性

React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。

React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。

代碼示例：

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{
    //構造方法
    constructor(){
        super();
        this.state = {
            name: 'tom'
        }
    }

    render(){
        //state屬性是可修改的
        this.state.name = 'jack';
        return (
        <h2>{this.state.name}</h2>
        );
    }
}

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

設置狀態:setState

setState(object nextState[, function callback])

不能在組件內部通過this.state修改狀態，因為該狀態會在調用setState()后被替換。

setState()并不會立即改變this.state，而是創建一個即將處理的state。setState()并不一定是同步的，為了提升性能React會批量執行state和DOM渲染。

setState()總是會觸發一次組件重繪，除非在shouldComponentUpdate()中實現了一些條件渲染邏輯

3.3、props和state屬性的區別

• props中的數據都是外界傳遞過來的；
• state中的數據都是組件私有的；（通過Ajax獲取回來的數據，一般都是私有數據）
• props中的數據都是只讀的，不能重新賦值；
• state中的數據，都是可讀可寫的；
• 子組件只能通過props傳遞數據；

3.4、refs 屬性

在React數據流中，父子組件唯一的交流方式是通過props屬性；如果要修改子組件，通過修改父組件的屬性，更新達到子組件props屬性的值，重新渲染組件以達到視圖的更新。但是，有些場景需要獲取某一個真實的DOM元素來交互，比如文本框的聚焦、觸發強制動畫等

• 給DOM元素添加ref屬性
• 給類組件添加ref屬性

代碼示例：

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{

    constructor(){
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    //點擊事件
    handleClick(){
        // 使用原生的 DOM API 獲取焦點
        this.refs.myInput.focus();
    }

    render(){
        return (
            <div>
                <input type="text" ref="myInput" />
                <input
                    type="button"
                    value="點我輸入框獲取焦點"
                    onClick={this.handleClick}/>
            </div>
        );    
    }
}

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