JSX 中的函式

為了獲得更好的效能，避免在 JSX 中使用陣列（lambda）函式非常重要。

如 https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md 所述 ：

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

所以如果有像這樣的 jsx 程式碼塊：

                    <TextInput
                      onChangeValue={  value => this.handleValueChanging(value) }
                    />

要麼

                    <button onClick={ this.handleClick.bind(this) }></button>

你可以做得更好：

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

和

                    <button onClick={ this.handleClick }></button>

對於 handleValueChanging 函式中的正確上下文，你可以在元件的建構函式中應用它：

          constructor(){
            this.handleValueChanging = this.handleValueChanging.bind(this)
          }

更多地繫結傳遞給元件的函式

或者你可以使用這樣的解決方案： https ： //github.com/andreypopp/autobind-decorator ，只需將 @autobind 裝飾器新增到你想要繫結的每個方法：

        @autobind
        handleValueChanging(newValue)
        {
            //processing event
        }