範例說明

接下來我們要通過一個簡單的案例，詳細的學習React的內容

如上圖所示，兩個按鈕，點選加號按鈕，數字加一，點選減號按鈕，數字減一

程式碼結構

使用create-react-app建立一個工程，將其中的程式碼結構刪減到最簡單的模式

修改index.js

index.js中的程式碼就很簡單了，只要引入App元件，執行渲染即可

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App'

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

元件的基本內容

App.js中的內容才是我們要真正實現的邏輯,我們將使用ES6的方式建立一個React的元件，步驟如下

1. 引入react

import React from 'react'

2.建立元件，並讓元件繼承React.Component,同時實現render函式

class App extends React.Component{

    render(){
        return (
            <div>

            </div>
        )
    }
}
 

3.為元件指定預設輸出

export default App

完整程式碼如下：

import React from 'react';

class App extends React.Component{

    render(){
        return (
            <div>

            </div>
        )
    }
}

export default App;

• React.Component是react的一個抽象基類，單獨引用它毫無意義，我們通常用其來實現子類，實現子類的時候必須要實現其render函式
• render函式的所用是返回元件的內容，而渲染的過程是有 react框架來完成的，在return()中只能有一個頂級的標籤元素
• export default指定了當前元件輸出的預設模組

功能實現

範例中的內容可分為四個部分

1.加號按鈕
2.減號按鈕
3.簡單文字
4.滑鼠點選按鈕變化的數字

其中按鈕和文字都非常簡單，但是數字需要滑鼠點選進行改變的，假如我們沒有學習過任何的前端框架，我們就要使用document物件，獲取頁面的內容，然後將其裝換為數字，再對數字進行計劃，然後將計算結果寫入頁面。而使用react來實現，我們需要知道，react的核心目標 元件化，元件中可變換的內容稱之為狀態

元件中的資料來源有兩種，內部宣告和外部傳入，分別用state和prop進行區別和表示，在es6元件中，可以通過constructor建構函式中接收外部傳來的prop和宣告內部使用的狀態資料，在本文的範例中，我們需要用到一個在滑鼠點選後不斷變化的數字

constructor(props){
    super(props);
    this.state = {
        count:0
    }
}

我們已經聲明瞭內部狀態，並接收了外部傳入的陣列，下面我實現頁面的展示內容,即實現render函式中的內容

    render(){
        return (
            <div>
                <button>+</button>
                <button>+</button>
                <span>當前點選次數</span>
                <span>{this.state.count}</span>
            </div>
        )
    }

渲染效果如圖1-3所示

內容美化

從頁面效果來看，各個元素緊靠在一起，不太好看，我們通過簡單的css對其進行美化，要達到的目標是：
- 整個內容增加上邊距和左邊距
- 按鈕、文字、數字相互之間有一定的間距

在react中，使用css的方式與傳統的方式有不同的地方
- 引入外部樣式檔案
新建style/App.css

.box{
    margin-left: 50px;
    margin-top: 50px;
}
.box *{
    margin:auto 5px;
}

在App.js引入這個css檔案

import '../style/App.css'

在這裡要值得注意的是，在react中，class屬性要寫成className，因為class是 JavaScript 的保留字

    render(){
        return (
            <div className="box">
                <button>+</button>
                <button>-</button>
                <span>當前點選次數</span>
                <span>{this.state.count}</span>
            </div>
        )
    }

• 使用JavaScript物件來宣告樣式

    render(){
        const style={
            marginLeft:'50px',
            marginTop:'50px'
        }
        const item = {
            margin:'auto 5px'
        }
        return (
            <div style={style}>
                <button style={item}>+</button>
                <button style={item}>-</button>
                <span style={item}>當前點選次數</span>
                <span style={item}>{this.state.count}</span>
            </div>
        )
    }

執行效果與圖1-4一樣

使用物件宣告樣式時，要使用camelCase，也就是駝峰式命名法

• 將樣式物件直接寫到html中

    render(){
        return (
            <div style={{marginLeft:'50px',marginTop:'50px'}}>
                <button style={{margin:'auto 5px'}}>+</button>
                <button style={{margin:'auto 5px'}}>-</button>
                <span style={{margin:'auto 5px'}}>當前點選次數</span>
                <span style={{margin:'auto 5px'}}>{this.state.count}</span>
            </div>
        )
    }

可以看到，style屬性中的內容使用了兩層大括號，其中外層的大括號是React表示式，內層的大括號是JavaScript物件

上述三種css的書寫方式的效果是一樣的，在後續的範例中，為了讓程式碼簡單直觀，採用引入外部css檔案的方式

按鈕事件

接下來為兩個按鈕增加點選事件，react中的點選事件為onClick，它與html中的onclick有一些區別，在這裡不進行詳細描述。我們為加號按鈕增加事件處理函式increment，為減號增加事件處理函式decrement。在increment,讓state中的count的值加1,在decrement中，讓state中count的值減1

注意點：

事件函式繫結this
修改state的方式

import React from 'react';
import '../style/App.css'

class App extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            count:0
        }
        this.increment = this.increment.bind(this);
        this.decrement = this.decrement.bind(this);
    }

    increment(){
        this.setState({count:this.state.count+1})
    }

    decrement(){
        this.setState({count:this.state.count-1})
    }

    render(){
        return (
            <div className="box">
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <span>當前點選次數</span>
                <span>{this.state.count}</span>
            </div>
        )
    }
}

export default App;

• 修改state中的資料，要呼叫setState函式來進行設定
• 定義普通的的函式來處理事件，需要在建構函式中與this進行繫結，否則在函式內部，this為undefined

此時我們在頁面點選按鈕，就能看到效果了

讓繫結this的方式完美一些

在上面的程式碼中，我們可以看到，事件處理函式要在建構函式中呼叫bind函式來繫結this，在這裡我們只有兩個函式，在複雜引用中可能有更多的函式，要是每一個函式都要這麼繫結一次，對於有強迫症或者潔癖的開發人員來說是一件非常鬧心且痛苦的事情。因此我們要使用更加簡潔的方式

請看程式碼

import React from 'react';
import '../style/App.css'

class App extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            count:0
        }

    }

    increment  = () => {
        this.setState({count:this.state.count+1})
    }

    decrement = () => {
        this.setState({count:this.state.count-1})
    }

    render(){
        return (
            <div className="box">
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <span>當前點選次數</span>
                <span>{this.state.count}</span>
            </div>
        )
    }
}

export default App;

點選按鈕效果完全一樣，整個世界都乾淨了！

從外部傳入資料

在前面我們說到，props是用來從外部傳遞資料的，那麼它是如何傳遞的呢？

在index.js中我們為App標籤新增屬性name

ReactDOM.render(<App name="當前點選次數"/>, document.getElementById('root'));

然後修改App.js中的render函式

    render(){
        return (
            <div className="box">
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <span>{this.props.name}</span>
                <span>{this.state.count}</span>
            </div>
        )
    }

執行效果與之前是一樣的！

到這裡呢，這個簡單而又覆蓋到react的大部分內容的範例就說完了！上手試試，其實很簡單的！