脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React.js绑定this

React.js绑定this的5种方法(小结)

 更新时间：2018年06月05日 14:39:47   作者：Monster000  
this在javascript中已经相当灵活，这篇文章主要介绍了React.js绑定this的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

this在javascript中已经相当灵活，把它放到React中给我们的选择就更加困惑了。下面一起来看看React this的5种绑定方法。

1.使用React.createClass

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

const App = React.createClass({
 handleClick() {
  console.log('this > ', this); // this 指向App组件本身
 },
 render() {
  return (
   <div onClick={this.handleClick}>test</div>
  );
 }
});

但是需要注意随着React 16版本的发布官方已经将改方法从React中移除

2.render方法中使用bind

如果你使用React.Component创建一个组件，在其中给某个组件/元素一个onClick属性，它现在并会自定绑定其this到当前组件，解决这个问题的方法是在事件函数后使用.bing(this)将this绑定到当前组件中。

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

这种方法很简单，可能是大多数初学开发者在遇到问题后采用的一种方式。然后由于组件每次执行render将会重新分配函数这将会影响性能。特别是在你做了一些性能优化之后，它会破坏PureComponent性能。不推荐使用

3.render方法中使用箭头函数

这种方法使用了ES6的上下文绑定来让this指向当前组件，但是它同第2种存在着相同的性能问题，不推荐使用

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

下面的方法可以避免这些麻烦，同时也没有太多额外的麻烦。

4.构造函数中bind

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

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>
  )
 }
}

然后这种方法很明显在可读性和维护性上没有第2种和第3种有优势，但是第2种和第3种由于存在潜在的性能问题不推荐使用，那么现在推荐 ECMA stage-2 所提供的箭头函数绑定。

5.在定义阶段使用箭头函数绑定

要使用这个功能，需要在.babelrc种开启stage-2功能，绑定方法如下：

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

这种方法有很多优化：

  1. 箭头函数会自动绑定到当前组件的作用域种，不会被call改变
  2. 它避免了第2种和第3种的可能潜在的性能问题
  3. 它避免了第4种绑定时大量重复的代码

总结：

如果你使用ES6和React 16以上的版本，最佳实践是使用第5种方法来绑定this

参考资料：

React.js pure render性能渲染反模式

this绑定装饰器

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 深入理解React State 原理

    深入理解React State 原理

    本文主要介绍了React State 原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • react redux的原理以及基础使用讲解

    react redux的原理以及基础使用讲解

    这篇文章主要介绍了react redux的原理以及基础使用讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • React报错Element type is invalid解决案例

    React报错Element type is invalid解决案例

    这篇文章主要为大家介绍了React报错Element type is invalid解决案例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React+Webpack快速上手指南(小结)

    React+Webpack快速上手指南(小结)

    这篇文章主要介绍了React+Webpack快速上手指南(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 记一次react前端项目打包优化的方法

    记一次react前端项目打包优化的方法

    这篇文章主要介绍了记一次react前端项目打包优化的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 详解使用webpack+electron+reactJs开发windows桌面应用

    详解使用webpack+electron+reactJs开发windows桌面应用

    这篇文章主要介绍了详解使用webpack+electron+reactJs开发windows桌面应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • React组件设计过程之仿抖音订单组件

    React组件设计过程之仿抖音订单组件

    这篇文章主要介绍了React组件设计过程之仿抖音订单组件的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • React中不适当的Hooks使用问题及解决方案

    React中不适当的Hooks使用问题及解决方案

    在 React 开发中,Hooks 提供了一种强大的方式来管理组件的状态和生命周期,然而,不恰当的 Hooks 使用可能会导致组件行为异常、性能问题或难以调试的错误,本文将探讨 React 中常见的不适当 Hooks 使用问题,并提供解决方案,需要的朋友可以参考下
    2025-03-03
  • 如何在React中直接使用Redux

    如何在React中直接使用Redux

    这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下
    2022-11-11
  • React使用Canvas绘制大数据表格的实例代码

    React使用Canvas绘制大数据表格的实例代码

    之前一直想用Canvas做表格渲染的,最近发现了一个很不错的Canvas绘图框架Leafer,api很友好就试着写了一下,文中有详细的代码示例供大家参考,感兴趣的小伙伴可以自己动手试试
    2023-09-09

最新评论