React事件绑定的几种方式

Souleigh ✨ 等级 1174 0 1
标签: reactbind

React事件绑定的几种方式

一、React事件是什么

react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick

最简单的事件绑定如下:

class ShowAlert extends React.Component {  
  showAlert() {  
    console.log("Hello World");  
  }  

  render() {  
    return <button onClick={this.showAlert}>show</button>;  
  }  
}  

从上面可以看到,事件绑定的方法需要使用{}包住

上述的代码看似没有问题,但是当将处理函数输出代码换成console.log(this)的时候,点击按钮,则会发现控制台输出undefined

二、如何绑定事件

为了解决上面正确输出this的问题,常见的绑定方式有如下:

  • render方法中使用bind

  • render方法中使用箭头函数

  • constructor中bind

  • 定义阶段使用箭头函数绑定

render方法中使用bind

如果使用一个类组件,在其中给某个组件/元素一个onClick属性,它现在并会自定绑定其this到当前组件,解决这个问题的方法是在事件函数后使用.bind(this)this绑定到当前组件中

class App extends React.Component {  
  handleClick() {  
    console.log('this > ', this);  
  }  
  render() {  
    return (  
      <div onClick={this.handleClick.bind(this)}>test</div>  
    )  
  }  
}  

这种方式在组件每次render渲染的时候,都会重新进行bind的操作,影响性能

render方法中使用箭头函数

通过ES6的上下文来将this的指向绑定给当前组件,同样在每一次render的时候都会生成新的方法,影响性能

class App extends React.Component {  
  handleClick() {  
    console.log('this > ', this);  
  }  
  render() {  
    return (  
      <div onClick={e => this.handleClick(e)}>test</div>  
    )  
  }  
}  

constructor中bind

constructor中预先bind当前组件,可以避免在render操作中重复绑定

class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.handleClick = this.handleClick.bind(this);  
  }  
  handleClick() {  
    console.log('this > ', this);  
  }  
  render() {  
    return (  
      <div onClick={this.handleClick}>test</div>  
    )  
  }  
}  

定义阶段使用箭头函数绑定

跟上述方式三一样,能够避免在render操作中重复绑定,实现也非常的简单,如下:

class App extends React.Component {  
  constructor(props) {  
    super(props);  
  }  
  handleClick = () => {  
    console.log('this > ', this);  
  }  
  render() {  
    return (  
      <div onClick={this.handleClick}>test</div>  
    )  
  }  
}  

三、区别

上述四种方法的方式,区别主要如下:

  • 编写方面:方式一方式二写法简单,方式三的编写过于冗杂

  • 性能方面:方式一方式二在每次组件render的时候都会生成新的方法实例,性能问题欠缺。若该函数作为属性值传给子组件的时候,都会导致额外的渲染。而方式三方式四只会生成一个方法实例

综合上述,方式四是最优的事件绑定方式 👍

收藏
评论区

相关推荐

10分钟教你手写8个常用的自定义hooks
前言 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文章,主要讲解实际项目中如何使用hooks以及一些最佳实践,不会一步步再介绍一遍react hooks的由来和基本使用,因为写hooks的文章很多,而且官网对于react hooks的介绍也很详细
25、react入门教程
25、react入门教程 25、react入门教程 0. React介绍 0.1 什么是React? React(有时称为React.js 或ReactJS)是一
Angular vs React 最全面深入对比
Angular vs React 最全面深入对比 Angular vs React 最全面深入对比 本文参考文章:https://www.sitepoint.com/reactvsangul
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
一起走进React核心团队
当我刚来Facebook的React团队工作时,我不确定接下来的工作会怎么样。表面看,React核心团队似乎很大!但事实证明,像Eli White和Sebastian McKenzie这样的人都在React Native团队。考虑加上那些维护开源库的维护者,比如Chakra UI、Framer Motion,React核心团队人数似乎能填满整个体育场!但事实
Hook 简介 – React
Hook 简介 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 sta
使用 State Hook – React
使用 State Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。中使用下面的例子介绍了 Hook:import React, { useState } from 'react';function Example() { //
使用 Effect Hook – React
使用 Effect Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。_Effect Hook_ 可以让你在函数组件中执行副作用操作import React, { useState, useEffect } from 'reac
React 之设计原则
编写该文档的目的是,使开发者更易于了解我们如何决策 React(应该做哪些,不应该做哪些),以及我们的开发理念。我们非常欢迎来自社区的贡献,但如若违背这些理念,实非我们所愿。 注意: 文章描述了 React 自身的设计原则,而非 React 组件或应用,阅读者需要对 React 有深入的理解。 如需 React 的入门文档,查看 。
新手学习 React 迷惑的点
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来,如果你还以其他的对于学习 React 很迷惑的点,可以在留言区里给我留言。为什么要引入 Reac
React 灵魂 23 问,你能答对几个?
1、setState 是异步还是同步? 1. 合成事件中是异步 2. 钩子函数中的是异步 3. 原生事件中是同步 4. setTimeout中是同步 相关链接:你真的理解setState吗?: 2、聊聊 react@16.4 的生命周期相关连接:React 生命周期 我对 React v16.4 生命周期的
面向初学者的 React 路由-React Router的完整指南!
因此,您正在尝试学习React.js。也许您甚至已经在其中构建了几个简单的项目。无论您是新开发人员还是有一定经验的人,都可能会发现自己必须开发具有不同页面和路线的Web应用程序。那就是React Router发挥作用的时候。什么是React Router?React Router提供了一种在React或React Native应用程序中实现路由的简便方法。入
React Hook丨用好这9个钩子,所向披靡
React Hook 指南 什么是 Hook ? Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质上就是一个函数,它简洁了组件,有自己的状态管理,生命周期管理,状态共享。 useState useEffect useContext us
React事件绑定的几种方式
一、React事件是什么在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick最简单的事件绑定如下:class ShowAlert extends React.Component   showAlert()      console.log("Hello World");      render()