伏龙阁资源网

React.js绑定this的5种方法(小结)
站长资源 2024/11/27 佚名
2 0

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绑定装饰器

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接