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
        }