03绑定属性和事件

属性绑定
在JSX语法的html代码中，标签属性比如id、class等，需要主要class的写法是className，因为在js中有class类这样的关键字，不允许使用。如

let count = 0;

// javascript XML
const template = (<div>
        <h1 id='my-id' className="my-class">{count}</h1>
        <button>+</button>
        <button>-</button>
    </div>)

在这里插入图片描述
其他不允许相同的具体属性可以查阅React官方文档。
属性值可以绑定:

let count = 0;
let button1 = "add";
let button2 = "minus"
// javascript XML
const template = (<div>
        <h1 id='my-id' className="my-class">{count}</h1>
        <button id={button1}>+</button>
        <button id={button2}>-</button>
    </div>)

在这里插入图片描述

事件绑定
比如点击事件onclick中on后面的第一个字母要大写，如onClick,其他事件也是一样。
下面我们来看一段代码：

let count = 0;
let button1 = "add";
let button2 = "minus"

const addOne = () => {
    count = count + 1
    console.log(count)
}
const minusOne = () => {
    count = count - 1
    console.log(count)
}
const resetCount = () => {
    count = 0;
    console.log(count)
}
// javascript XML
const template = (<div>
        <h1 id='my-id' className="my-class">{count}</h1>
        <button id={button1} onClick={addOne}>+</button>
        <button id={button2} onClick={minusOne}>-</button>
        <button id="reset" onClick={resetCount}>重置</button>
    </div>)

在这里插入图片描述
在这里我们看见数据发生了变化，但是并没有响应到屏幕上，需要重新渲染render函数。

let count = 0;
let button1 = "add";
let button2 = "minus"

const addOne = () => {
    count = count + 1
    console.log(count)
    renderCountApp();
}
const minusOne = () => {
    count = count - 1
    console.log(count)
    renderCountApp();
}
const resetCount = () => {
    count = 0;
    console.log(count)
    renderCountApp();
}
// 更新DOM
const renderCountApp = () => {
    const template = (<div>
        <h1 id='my-id' className="my-class">{count}</h1>
        <button id={button1} onClick={addOne}>+</button>
        <button id={button2} onClick={minusOne}>-</button>
        <button id="reset" onClick={resetCount}>重置</button>
    </div>);
    // 获取html文件中的节点，使用ReactDOM中的render方法插入
    const root = document.getElementById("app");
    ReactDOM.render(template, root)
}
renderCountApp();

在这里插入图片描述
那么用ReactDOM.render重新渲染的时候全部DOM都会渲染一遍吗？

并没有把所有的DOM重新渲染一遍，只把需要的渲染了一下。这功归于虚拟DOM。
我们打印一下模板：

console.log(template)

在这里插入图片描述
由此可见，由React.createElement创建的template模板实际上是一个对象，然后对比对象的改变得知不同。

来源：CSDN

作者：星辰大海_enoch

链接：https://blog.csdn.net/u012872771/article/details/103534273

标签

const

按钮