React中的合成事件

合成事件与原生事件 区别:

1. 命名不一样,原生用纯小写方式,react用小驼峰的方式

原生:onclick React的:onClick

2. 事件处理函数的写法不一样

原生的是传入一个字符串,react写法传入一个回调函数

3. 阻止默认行为方式不同

原生:return false, react中的:event.preventDefault()

javascript 复制代码
class Toggle extends React.Component {
    constructor(props)
    super(props)
    this.state={ isToggleOn: true }
    // 为了在回调中使用this, 这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this)

    handleClick(){
        this.setState((prevState) => ({
            isToggleOn: !prevState.isToggleOn
        }))
    }    

    render(){
        return (
            // class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClick,this的值为undefined
            <Button onClick={this.handleClick}> // 2. 传入一个回调函数
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </Button> // 1. onClick小驼峰写法

        )
    }

}

【 拓展:为什么需要绑定this 】

button按钮编译的过程:React.createElement()

javascript 复制代码
// 伪代码
// 证明为什么绑定this
function creteElement (dom, params) {
    var domObj = document.createElement(dom)
    domObj.onClick = params.onClick // 后面的onClick(当前的onClick函数)赋值给前面的onClick, 这时,onClick执行的作用域是外层作用域。所以return出去的值找不到this.handleClick。[所以需要绑定this指定到当前的作用域]
    domObj.innerHTML = params.content
    return domObj
}

React.creteElement('button', {
    onClick: this.handleClick  
}, this.state.isToggleOn ? 'ON' : 'OFF')

如果不想绑定this的写法:

javascript 复制代码
class Toggle extends React.Component {
    constructor(props)
    super(props)
    this.state={ isToggleOn: true }
    // 法1:bind绑定:为了在回调中使用this, 这个绑定是必不可少的
    // this.handleClick = this.handleClick.bind(this)

    handleClick = () => { // 法2:写成箭头函数,箭头函数没有作用域的
        this.setState((prevState) => ({
            isToggleOn: !prevState.isToggleOn
        }))
    }    

    render(){
        return (
            // class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClick,this的值为undefined
            <Button onClick={() => this.handleClick()}> // 2. 传入一个回调函数   法3
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </Button> // 1. onClick小驼峰写法

        )
    }

}

. 为何React要用合成事件机制

  1. 进行浏览器兼容、跨平台、事件代理(移动端和pc端的一些原生事件不一定完全兼容的)

  2. 挂载到documnet,减少内存消耗,避免频繁绑定和解绑事件,也方便事件统一管理

  3. 避免垃圾回收、react事件池

相关推荐
不想上班只想要钱8 分钟前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js
OEC小胖胖9 分钟前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js
切糕师学AI20 分钟前
如何建立针对 .NET Core web 程序的线程池的长期监控
java·前端·.netcore
F2E_Zhangmo3 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip8 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel8 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休9 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪9 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do9 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选9 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc