3、React绑定属性和事件，以及事件的响应。javascriptCounter的博客-

大家好，我是Counterrr

接下来讲讲React的绑定属性和事件，以及事件的响应，这里就不赘述环境的搭建了，环境搭建可以看我前面的文章。(1、React环境搭建，以及初识jsx语法。)

好的，主要分两部分React绑定属性和事件：
1、绑定属性：
我们用vscode打开之前在桌面建好的react-demo文件，打开vscode终端命令行输入命令live-server启动服务，再在vscode再开启一个命令行输入

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

在上篇文章（2、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就可以了，具体更多的属性冲突问题可以查看这里。

2、绑定事件以及事件的响应：

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和这次的哪里不一样就改哪里。