JSX道具不應該使用.bind（） - 如何避免使用bind？

Question

我有一個容器，我需要更改顯示表單或顯示成功頁面的UI表單。

容器有一個state.showSuccess，我需要MyFormModule才能調用容器來改變狀態。

以下代碼有效，但我收到以下警告：

“JSX道具不應該使用.bind（）”

如何在不使用.bind（）的情況下使其工作？

...
const myPage = class extends React.Component {
  state = { showSuccess: false };
  showSuccess() {
   this.setState({
      showSuccess: true,
    });
  }
  render() {
    const { showSuccess } = this.state;
    if (showSuccess) {...}
    ....
    <MyFormModule showSuccess={this.showSuccess.bind(this)} />

Answer 1

你應該首先明白為什么這是一個不好的做法 。

這里的主要原因是.bind返回一個新的函數引用。
這將在每次render調用時發生，這可能會導致性能下降。

你有兩個選擇：

1. 使用構造函數bind處理程序（這將只運行一次 ）。

    constructor(props) { super(props); this.showSuccess = this.showSuccess.bind(this); } 

2. 或創建處理器箭頭功能，所以他們會用的詞匯上下文this ，因此你不必bind在所有的人（ 你需要一個通天插件 ）：

    showSuccess = () => { this.setState({ showSuccess: true, }); } 

你不應該使用這種模式（如其他建議）：

showSuccess={() => this.showSuccess()}

因為這也將在每個渲染上創建一個新函數。
因此，您可以繞過警告但仍在編寫錯誤的練習設計中。

從ESLint文檔 ：

JSX prop中的綁定調用或箭頭函數將在每個渲染上創建一個全新的函數。 這對性能不利，因為它會導致垃圾收集器的調用方式超出必要的范圍。 如果將全新的函數作為prop傳遞給使用對prop的引用相等性檢查以確定是否應該更新的組件，它也可能導致不必要的重新呈現。

Answer 2

定義showSuccess時使用箭頭函數

showSuccess = () => {
  this.setState({
    showSuccess: true,
  });
} 

Answer 3

因為它們可以自動獲取使用箭頭功能this的地方，他們被定義背景。

showSuccess={() => this.showSuccess()}

這是關於此主題的facebook文檔的鏈接，其中列出了此方法作為解決方案。 有趣的是，他們還在支柱中列出使用.bind作為解決方案之一，即使它在實際使用時會產生警告。

從該文檔中，您將注意到這是一個潛在的性能問題，因為該函數將在每個渲染上重新創建：

注意：

在渲染中使用箭頭函數會在每次渲染時創建一個新函數，這可能會影響性能（參見下文）。

但也來自同一個鏈接：

在渲染方法中使用箭頭函數是否可以？ 一般來說，是的，沒關系，並且它通常是將參數傳遞給回調函數的最簡單方法。

如果您確實遇到性能問題，請務必優化！

所以我想說如果你的組件會經常重新渲染，你應該使用其他解決方案之一：在構造函數中綁定，或者首先用箭頭函數定義方法。 但如果沒有，請使用對您來說最干凈的方法。