三、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和此次的哪里不同就改哪里。