大家好,我是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和这次的哪里不一样就改哪里。