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

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

所以，推荐第一种。

实质上，是一样的。