在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

現(xiàn)在使用react寫代碼時(shí)，有兩種寫法
一種是

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

另一種是

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

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

回答
編輯回答
尛憇藌

樓上說的全都不準(zhǔn)確

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

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

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

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

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

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

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

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

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

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

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

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

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

所以，推薦第一種。

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

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

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

2017年7月3日 20:30