react方法调用问题

Question

现在使用react写代码时，有两种写法
一种是

class App extends Component{
    constructor(props){
        super(props)
        this.state={status:true}
    }
    doSomething:()=>{
        this.setState({status:false})
    }
    render(){
        return (<div><button onClick={this.doSomething}>点击</button></div>)
    }  
}

另一种是

class App extends Component{
    constructor(props){
        super(props)
        this.state={status:true}
    }
    render(){
        return (<div><button onClick={()=>this.setState({status:false})}>点击</button></div>)
    }  
}

想知道这两种到底有什么区别，哪种方式更好？

Answer 1

楼上说的全都不准确

这两种写法是有重大区别的。

在第二种写法里，每次 <button> 被重渲染时，传入的 onClick 都是一个新创建的函数。
你的例子用的是 <button> 还好，用起来效果不会有区别，但如果是你自定义的组件就不一样了。

如果你在自定义组件里实现 componentWillReceiveProps 钩子如下：

componentWillReceiveProps(nextProps) {
  console.log(nextProps.onClick === this.props.onClick)
}

用第二种写法传递的话会发现结果永远是 false，而用第一种则是 true。

这带来的影响到你做性能优化的时候就会体现出来了，会增加不必要的重渲染。
虽然影响也许不大，虽然第二种写法并不是必要改成第一种，还是希望你能知道这两种写法并不像楼上所说的没有区别。

Answer 2

一般的做法是：
如果这个方法只调用一次，并且方法内容很少，比如：setState，那么就可以直接写到组件的属性中了。
如果方法内容很复杂或者调用的地方比较多，那么就可以单独写出去，然后再调用了。

一句话总结：选择效率高的那种方法。

Answer 3

这俩有区别吗？？一般不建议将函数方法写在标签元素内，建议第一种。

Answer 4

没太大区别....不过建议将方法定义在外面...感觉好维护一点

Answer 5

第二种的话，如果你多处调用此函数，需要写很多遍，而且，函数体如果复杂的话……

所以，推荐第一种。

实质上，是一样的。