React從零開始——一個詳細的範例

範例說明

接下來我們要通過一個簡單的案例，詳細的學習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的大部分內容的範例就說完了！上手試試，其實很簡單的！