【React】绑定this的5种方法总结

一、简介

二、方法

三、总结

一、简介

React中定义一个组件，可以通过ES6版本以前的React.createClass或者ES6的class xxx extends React.Component。如果使用ES6并且react版本在16以上，推荐采用class的方式，代码结构更加清晰，可读性强，而且React官方也推荐使用这种方式定义组件。

绑定this是react中非常重要的一部分。React中，绑定this的方式有多种,下面一一看看怎么进行this绑定。

二、方法

a.【第一种方式】使用ES5方式创建组件绑定this的方法

如果你使用的是React 15及以下的版本，你可能使用过React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上。

/*** @Description: 第一种方法: 使用ES5方式创建组件绑定this的方法* @author weishihuai* @date 2019/5/15 9:59** 说明: React.createClass is deprecated since React 15.5.0, use the npm module create-react-class instead (react/no-deprecated)* 注意随着React 16版本的发布官方已经将改方法从React中移除**/
const MyApp1 = React.createClass({handleClickListener() {console.log('this > ', this); // this 指向App组件本身},render() {return (<div onClick={this.handleClickListener}>使用ES5方式创建组件绑定this的方法</div>);}});export default MyApp1;

b.【第二种方式】render方法调用的时候使用.bind(this)进行绑定

import React from 'react';/*** @Description: 第二种方法: render方法调用的时候使用.bind(this)进行绑定* @author weishihuai* @date 2019/5/15 9:59** 说明: 由于组件每次执行render会重新分配事件函数,将会影响性能*/
export default class MyApp2 extends React.Component {handleClickListener() {console.log('this->', this);}render() {return (<div onClick={this.handleClickListener.bind(this)}>render方法调用的时候使用.bind(this)进行绑定</div>);}}

缺点：由于组件每次执行render会重新分配事件函数,将会影响性能

c.【第三种方式】render方法调用的时候使用箭头函数进行绑定

/*** @Description: 第三种方法: render方法调用的时候使用箭头函数进行绑定* @author weishihuai* @date 2019/5/15 9:59** 说明: 由于组件每次执行render会重新分配事件函数,将会影响性能*/
export default class MyApp3 extends React.Component {handleClickListener() {console.log('this->', this);}render() {return (<div onClick={e => this.handleClickListener(e)}>render方法调用的时候使用箭头函数进行绑定</div>);}}

这种方式使用了ES6的上下文绑定来让this指向当前组件，同第二种方式，由于组件每次执行render会重新分配事件函数,将会影响性能。

d.【第四种方式】在构造函数中进行显式绑定this.xxx.bind(this)

为了避免在render中绑定this引发可能的性能问题，我们可以在constructor中预先进行绑定。

import React from 'react';/*** @Description: 第四种方法: 在构造函数中进行显式绑定this.xxx.bind(this)* @author weishihuai* @date 2019/5/15 9:59** 说明: 如果有多个函数需要写很多重复绑定代码*/
export default class MyApp4 extends React.Component {constructor(props) {super(props);this.handleClickListener = this.handleClickListener.bind(this);}handleClickListener() {console.log('this->', this);}render() {return (<div onClick={this.handleClickListener}>在构造函数中进行显式绑定 this.xxx = this.xxx.bind(this)</div>);}}

缺点：如果有多个函数需要写很多重复绑定代码，可读性和可维护性相对较差。

e.【第五种方式】在定义函数的时候使用箭头函数定义

import React from 'react';/*** @Description: 第五种方法: 在定义函数的时候使用箭头函数定义* @author weishihuai* @date 2019/5/15 9:59** 说明: 箭头函数会自动绑定到当前组件的作用域中* 如果使用ES6和React 16以上的版本,强烈推荐使用该方式进行绑定*/
export default class MyApp5 extends React.Component {handleClickListener = () => {console.log('this->', this);};render() {return (<div onClick={this.handleClickListener}>在定义函数的时候使用箭头函数定义</div>);}
}

优点：箭头函数会自动绑定到当前组件的作用域中，不会产生很多重复代码，推荐使用此种方式绑定this.

三、总结

以上就是关于在React中绑定this的5中方法介绍，为了后期代码的可读性以及可维护性，推荐大家都使用箭头函数定义函数的方式进行绑定，当然特殊需求，就需要根据具体需求选择合适的方式绑定。本文只是笔者的一些学习总结，希望能对大家的学习有所帮助。