请教react native的写法中，用bind和用箭头函数哪个好？

Question

写法1：

<XXView xxxx={this.xxA.bind(this)} />

写法2：

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

写法3：

xxA = ()=>{};
<XXView xxxx={this.xxA} />

写法4：

<XXView xxxx={()=>this.xxA} />

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

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

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

Answer 1

我发觉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 ，也是和其他不同，使用了箭头函数。

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

Answer 2

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

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

Answer 3

我们一般写成这样，方便快捷：

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

  render() {
    <a onClick={this.onClick}>Click</a>
  }
}