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
}