javascript - 请教react native的写法中,用bind和用箭头函数哪个好?
高洛峰
高洛峰 2017-04-11 12:49:58
[JavaScript讨论组]

写法1:

写法2:

constructor(props) {
    super(props);
    this.xxA= this.xxA.bind(this);
  }

写法3:

xxA = ()=>{};

写法4:

this.xxA} />

1和2一样,3和4一样吧。

那么实际中大家更倾向哪种写法?

求教用箭头函数和用bind,有什么区别呢?哪个更好呢?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(3)
黄舟

我发觉2和3的做法,会触发xxA中的方法。
如果在xxA中涉及到改动state(当然不规范),比如来个toString()之类的,更明显,就会触发
“Cannot update during an existing state transition”警告。

参考:onPress 的正确使用姿势

我的源码如下:

  onPressItem(sourceItem){
    console.log('onPressItem');
    // toastShort('点击了'+sourceItem.name);
  }
  renderItem(sourceItem){
    return(
      <TouchableOpacity onPress={
        this.onPressItem(sourceItem)
        } >
        <View style={styles.containerItem}>
          <Text style={{ fontSize: 18, textAlign: 'left', color: '#87CEFA',  }}>
            {sourceItem.name}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
  constructor(props) {
    super(props);
    this.state = {
      dataSource: ds.cloneWithRows([]),
    };
    this.onPressItem = this.onPressItem.bind(this);
  }

页面一旦render,什么都不做,console.log('onPressItem');就会被执行多次。

而如果我使用

() => this.onPressItem(sourceItem)

就不会。

关于这个问题,我在bind和箭头函数-哪个更好呢 的帖子里也询问了。得到了不同答案。

并且我观察到某位实际从事React-Native开发的,在他的代码中,Main.js ,也是和其他不同,使用了箭头函数。

非常疑惑这几种的区别。希望能有真正了解的人谈一下。

ringa_lee

我的建议是写法二,因为其他写法都会返回一个新的引用,从而触发re-render,而第二种写法则不会。

前面的写法,貌似有误差和不足:首先第三种写法应该也是不会触发re-render的;第二是当需要绑定一些预置的参数时(也就是偏函数的概念),这时候二和三貌似都是不行的,此时一和四就派上用处了,看f8源码,在预置参数的时候便是用的行内bind的方式。

高洛峰

我们一般写成这样,方便快捷:

class SomeComp extends Component {
  onClick = () => {
    // Blah blah
  }

  render() {
    <a onClick={this.onClick}>Click</a>
  }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号