React笔记-事件(三)

React学习笔记-事件(三)

定义事件

React 元素的事件处理和 DOM 元素的很相似 但是有一点语法上的不同

React 事件的命名采用小驼峰式(camelCase)而不是纯小写 如点击事件onClick

import React from 'react'

export default class learnEvent extends React.Component {

  // // 直接在类里面定义一个方法
  hello () {
    console.log('hello word')
  }

  render () {
    return (
      <div>
        {/* 直接在类里面定义一个方法 事件使用小驼峰*/}
        <button onClick={this.hello}>直接定义</button>
      </div>
    )
  }
}

this指向问题

import React from 'react'

export default class learnEvent extends React.Component {
  // word的执行上下文为Window 由于jsx经babel编译后会开启严格模式。
  //       所以this指向变为undefined
  word () {
    console.log(this)
  }

  render () {
    return (
      <div>
        <button onClick={this.word}>this指向</button>
      </div>
    )
  }
}

解决this指向问题-bind改变指向

import React from 'react'

export default class learnEvent extends React.Component {

  // 用bind改变this指向
  wordBind () {
    console.log(this)
  }

  render () {
    return (
      <div>
        {/* 使用bind将this指向改到render上 render的this又指向实例对象 call和apply会自动执行不能使用
            尽量使用es6语法 bind不推荐使用 */}
        <button onClick={this.wordBind.bind(this)}>binb改变指向</button>
      </div>
    )
  }
}

解决this指向问题-ES6箭头函数

import React from 'react'

export default class learnEvent extends React.Component {

  // es6箭头函数
  wordES6 = () => {
    console.log(this);
  }

  render () {
    return (
      <div>
        {/* 箭头函数没有this 里面的this是箭头函数所处环境上下文this指向 在这里箭头函数外this指向实例对象
            这种方法无法传参 不推荐使用
            有性能影响 可以忽略不记 */}
        <button onClick={this.wordES6}>es6箭头函数</button>
      </div>
    )
  }
}

获取事件对象event

import React from 'react'

export default class learnEvent extends React.Component {

  // 获取事件event对象
  helloEvent(event) {
    console.log(event)
  }

  render () {
    return (
      <div>
        {/* 获取事件event对象 */}
        <button onClick={(event) => {this.helloEvent(event)}}>获取事件event对象</button>
      </div>
    )
  }
}

合成事件

概念

React 合成事件(SyntheticEvent)是 React 模拟原生 DOM 事件所有能力的一个事件对象 即浏览器原生事件的跨浏览器包装器 它根据 W3C 规范 来定义合成事件 兼容所有浏览器 拥有与浏览器原生事件相同的接口

// 这个onClick就是合成事件
<button onClick={xxx}>+1</button>

合成事件优势

1. 进行浏览器兼容 实现更好的跨平台

   • React 采用的是顶层事件代理机制 能够保证冒泡一致性 可以跨浏览器执行 React 提供的合成事件用来抹平不同浏览器事件对象之间的差异 将不同平台事件模拟合成事件

2. 避免垃圾回收

   • 事件对象可能会被频繁创建和回收 因此 React 引入事件池 在事件池中获取或释放事件对象 即 React 事件对象不会被释放掉 而是存放进一个数组中 当事件触发 就从这个数组中弹出 避免频繁地去创建和销毁(垃圾回收)

3. 方便事件统一管理和事务机制

合成事件和原生事件区别

a. 事件命名方式

// 原生事件命名为纯小写(onclick, onblur) 而 React 事件命名采用小驼峰式(camelCase) 如 onClick 等

// 原生事件绑定方式
<button onclick="handleClick()">+1</button>
      
// React 合成事件绑定方式
const button = <button onClick={handleClick}>+1</button>

b. 事件处理函数写法

// 原生事件中事件处理函数为字符串 在 React JSX 语法中 传入一个函数作为事件处理函数

// 原生事件 事件处理函数写法
<button onclick="handleClick()">+1</button>
      
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>+1</button>

c. 阻止默认行为方式

// 在原生事件中，可以通过返回 false 方式来阻止默认行为 但是在 React 中 需要显式使用 preventDefault() 方法来阻止

// 原生事件阻止默认行为方式
<a href="#" 
  onclick="console.log('阻止原生事件'); return false"
>
  阻止原生事件
</a>

// React 事件阻止默认行为方式
const handleClick = e => {
  e.preventDefault();
  console.log('阻止原生事件~');
}
const clickElement = <a href="#" onClick={handleClick}>
  阻止原生事件
</a>

React事件和原生事件执行顺序

1. React 所有事件都挂载在 document 对象上
2. 当真实 DOM 元素触发事件 会冒泡到 document 对象后 再处理 React 事件
3. 所以会先执行原生事件 然后处理 React 事件
4. 最后真正执行 document 上挂载的事件