三、React綁定屬性和事件，以及事件的響應。

你們好，我是Counterrr

接下來說講React的綁定屬性和事件，以及事件的響應，這裏就不贅述環境的搭建了，環境搭建能夠看我前面的文章。(一、React環境搭建，以及初識jsx語法。)

好的，主要分兩部分React綁定屬性和事件：
一、綁定屬性：
咱們用vscode打開以前在桌面建好的react-demo文件，打開vscode終端命令行輸入命令live-server啓動服務，再在vscode再開啓一個命令行輸入

npm run babel -- src/app.js -o public/scripts/app.js -w

在上篇文章（二、React熟悉，jsx語法以及變量綁定和三種渲染語句）中，咱們最後寫了以下代碼：

// 邏輯運算符進行條件渲染
let product = {
    favorite: 'React'
}
const template = (
    <div>
        {product.favorite && <div>我喜歡的語言有: {product.favorite}</div>}
    </div>
)
ReactDOM.render(template, document.getElementById('app'))

能夠看到此時網頁顯示的內容：
好的，日常咱們在html元素上能夠寫寫不少屬性，例如 id，class等等，那咱們這邊也給這個常量template中的div加上id 以及class

<div id="react" class="react-class">
     {product.favorite && <div>我喜歡的語言有: {product.favorite}</div>}
</div>

發現瀏覽器終端已經報錯了：

這是爲何呢？由於咱們寫的是jsx語法，在js中去寫了html，而在js中class已是關鍵詞了，全部不能有衝突，報錯其實已經給咱們提示了，把class改爲className就能夠了，具體更多的屬性衝突問題能夠查看這裏。

二、綁定事件以及事件的響應：

let count = 0;
let add = () => {
    count++
    console.log(`count = ${count}`)
}
const template = (
    <div>
        <div>{count}</div>
        <button onClick={add}>+1</button>  
    </div>
)

ReactDOM.render(template, document.getElementById('app'))

在React裏事件綁定例如點擊事件用onClick綁定在標籤上，而且花括號的形式將外界函數寫入，固然也能夠寫成這種形式：

<button onClick={
            () => {
            count++
            console.log(`count = ${count}`)
            }
        }>+1</button>

直接在花括號裏去寫，這邊仍是建議寫在外面，單獨用函數定義。此時界面以下：

咱們點擊按鈕+1，會發現：

控制檯輸出了count每次+1的值，那爲何這邊頁面卻還顯示0呢，這裏

const template = (
    <div>
        <div>{count}</div>
        <button onClick={add}>+1</button>  
    </div>
)

頁面監聽的是count沒有錯啊，爲何不改變新值呢？那這個react的機制就是這樣，從一開始咱們使用了ReactDOM.render(template, document.getElementById('app'))去渲染這個模板了，一開始count的值爲0渲染上，可是在後面的運行中，還須要從新的去運行這段ReactDOM.render(template, document.getElementById('app'))代碼才能將count的值從新渲染，接下來咱們把代碼改爲以下：

let count = 0;
let add = () => {
    count++
    reactRenderFunc()
    console.log(`count = ${count}`)
}
const reactRenderFunc = () => {
    const template = (
        <div>
            <div>{count}</div>
            <button onClick={add}>+1</button>  
        </div>
    )
    ReactDOM.render(template, document.getElementById('app'))
}

reactRenderFunc()

效果以下：

至關於咱們將模板以及渲染模板的函數總體封裝到一個函數中，當點擊按鈕時從新去觸發ReactDOM.render（）渲染方法，去真實的將咱們的實時數據渲染到頁面上。

那這裏就有疑問了，每次點擊每次渲染不是很耗費性能的一件事嗎？其實這裏不用但心，由於react作了處理，什麼處理呢，那就是虛擬dom的處理，每次點擊都會去判斷，上一個報錯的虛擬dom和此次的哪裏不同就改哪裏。