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

楼上说的全都不准确这两种写法是有重大区别的。在第二种写法里，每次&nbsp;<button>&nbsp;被重渲染时，传入的&nbsp;onClick&nbsp;都是一个新创建的函数。你的例子用的是&nbsp;<button>&nbsp;还好，用起来效果不会有区别，但如果是你自定义的组件就不一样了。如果你在自定义组件里实现&nbsp;componentWillReceiveProps&nbsp;钩子如下：componentWillReceiveProps(nextProps)&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;console.log(nextProps.onClick&nbsp;===&nbsp;this.props.onClick) }用第二种写法传递的话会发现结果永远是&nbsp;false，而用第一种则是&nbsp;true。这带来的影响到你做性能优化的时候就会体现出来了，会增加不必要的重渲染。虽然影响也许不大，虽然第二种写法并不是必要改成第一种，还是希望你能知道这两种写法并不像楼上所说的没有区别。

Answer 2

第二种的话，如果你多处调用此函数，需要写很多遍，而且，函数体如果复杂的话……所以，推荐第一种。实质上，是一样的。