首頁 > web前端 > js教程 > 為什麼應該避免在 JSX Props 中使用箭頭函數或綁定?

為什麼應該避免在 JSX Props 中使用箭頭函數或綁定?

Susan Sarandon
發布: 2024-11-06 21:49:02
原創
431 人瀏覽過

Why Should You Avoid Using Arrow Functions or Bind in JSX Props?

避免在JSX Props 中使用箭頭函數或綁定

為什麼這是一種不好的做法:

為什麼這是一種不好的做法:

  • 不鼓勵在JSX props 中使用箭頭函數或綁定,因為它會對效能產生負面影響。原因如下:
  • 垃圾收集效率低:在每個渲染上建立函數會在元件卸載時觸發不必要的垃圾收集。
渲染由於淺比較:

PureComponent 和在shouldComponentUpdate() 中使用shallowCompare 的元件會重新渲染,即使prop 值仍然存在不變,因為每次都會重新建立內聯函數prop 。

範例:

<Button onClick={() => console.log('clicked')} />
登入後複製
沒有內嵌箭頭函數:

按鈕不會重新渲染,除非它有其他道具

<Button onClick={this.handleClick} />
登入後複製
使用內聯箭頭函數:

每次組件渲染時,按鈕都會重新渲染,即使處理程序保持不變。

最佳實務:

class Button extends React.Component {
  handleClick = () => {
    // Handler logic
  };

  render() {
    return <button onClick={this.handleClick} />;
  }
}
登入後複製
要避免這些效能問題,請宣告JSX 以外的箭頭函數或綁定方法:

以上是為什麼應該避免在 JSX Props 中使用箭頭函數或綁定?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板