鍍金池/ 問答/HTML/ react方法調(diào)用問題

react方法調(diào)用問題

現(xiàn)在使用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>)
    }  
}

想知道這兩種到底有什么區(qū)別，哪種方式更好？

回答
編輯回答
尛憇藌

樓上說的全都不準確

這兩種寫法是有重大區(qū)別的。

在第二種寫法里，每次 <button> 被重渲染時，傳入的 onClick 都是一個新創(chuàng)建的函數(shù)。
你的例子用的是 <button> 還好，用起來效果不會有區(qū)別，但如果是你自定義的組件就不一樣了。

如果你在自定義組件里實現(xiàn) componentWillReceiveProps 鉤子如下：

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

用第二種寫法傳遞的話會發(fā)現(xiàn)結(jié)果永遠是 false，而用第一種則是 true。

這帶來的影響到你做性能優(yōu)化的時候就會體現(xiàn)出來了，會增加不必要的重渲染。
雖然影響也許不大，雖然第二種寫法并不是必要改成第一種，還是希望你能知道這兩種寫法并不像樓上所說的沒有區(qū)別。

2018年2月25日 08:44
編輯回答
心癌

一般的做法是：
如果這個方法只調(diào)用一次，并且方法內(nèi)容很少，比如：setState，那么就可以直接寫到組件的屬性中了。
如果方法內(nèi)容很復(fù)雜或者調(diào)用的地方比較多，那么就可以單獨寫出去，然后再調(diào)用了。

一句話總結(jié)：選擇效率高的那種方法。

2018年3月31日 06:16
編輯回答
貓小柒

沒太大區(qū)別....不過建議將方法定義在外面...感覺好維護一點

2018年9月3日 03:28
編輯回答
久不遇

第二種的話，如果你多處調(diào)用此函數(shù)，需要寫很多遍，而且，函數(shù)體如果復(fù)雜的話……

所以，推薦第一種。

實質(zhì)上，是一樣的。

2017年12月12日 09:08
編輯回答
心沉

這倆有區(qū)別嗎？？一般不建議將函數(shù)方法寫在標簽元素內(nèi)，建議第一種。

2017年7月3日 20:30