React事件绑定的几种方式

Souleigh ✨ 等级 1498 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的时候都会生成新的方法实例,性能问题欠缺。若该函数作为属性值传给子组件的时候,都会导致额外的渲染。而方式三方式四只会生成一个方法实例

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

收藏
评论区

相关推荐

25、react入门教程
25、react入门教程 25、react入门教程 0. React介绍 0.1 什么是React? React(有时称为React.js 或ReactJS)是一
Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
Hook 简介 – React
Hook 简介 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 sta
VSCode 搭建 React Native 环境
### 安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: ![](https://img2018.cnblogs.com/blog/1312841/201906/1312841-20190619104115078-1529635773.jpg) ### 创建的react-na
React Hook
用React Hook写一个简单的登录表单示例,两种方式: 第一种: import React, { useState } from "react"; import ReactDOM from "react-dom"; function LoginForm() { const [username, setUsern
React Native第三方组件和示例链接
以下是React Native的链接,有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View:https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条:https://js.coach/react-native/
React 小白初入门
推荐学习: * React 官方文档: [https://react.docschina.org/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Freact.docschina.org%2F) * React 菜鸟教程: [https://
React 设计思想
https://github.com/react-guide/react-basic React 设计思想 ========== > 译者序:本文是 React 核心开发者、有 React API 终结者之称的 Sebastian Markbåge 撰写,阐述了他设计 React 的初衷。阅读此文,你能站在更高的高度思考 React 的过去、现在和未来。
React.render和reactDom.render的区别
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。  新的react包包含了React.crea
React16.4 开发简书项目 从零基础入门到实战
第1章 课程导学 本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获。 1-1 课程导学 第2章 React初探 本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。 2-1 React简介 2-2 React开发环境准备 2-3 工程目录
React动画:react
#### 1.安装 yarn add react-transition-group #### 2.使用CSSTransition组件 import React, { PureComponent } from 'react'; import {
React学习笔记
**React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。** !
React技术栈实现XX点评电商App
> 项目地址:[https://github.com/Nealyang/React-Fullstack-Dianping-Demo](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNealyang%2FReact-Fullstack-Dianping-Demo)
React组件中的函数绑定this的几种方式
在React中使用class定义组件时如果不注意this的指向问题,会带来一些麻烦。 绑定this主要有下面两种方法: 1\. bind() 在class中定义函数,然后在**构造方法**中使用bind()绑定当前的组件对象。 class MyComponent extends React.Component { constr
React:react
使用react构建单页面应用:   实现方法:(1)react-router        (2)react-router-dom `react-router`: 实现了路由的核心功能,而react-router-dom依赖react-router, `react-router-dom`: 基于`react-router`,加入了在浏览器运行环境下的