我们应该避免在render内部绑定方法,因为在重新渲染期间它将创建新方法而不是使用旧方法,这将影响性能.
所以对于这样的场景:
<input onChange = { this._handleChange.bind(this) } ...../>
我们可以_handleChange在构造函数中绑定方法:
this._handleChange = this._handleChange.bind(this);
或者我们可以使用属性初始化器语法:
_handleChange = () => {....}
现在让我们考虑一下我们想要传递一些额外参数的情况,让我们说在一个简单的待办事项应用中,点击项目我需要从数组中删除项目,因为我需要传递每个项目索引或待办事项名称onClick方法:
todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)
现在假设todo名称是唯一的.
根据DOC:
此语法的问题是每次组件呈现时都会创建不同的回调.
题:
如何在render方法中避免这种绑定方式或者这有什么替代方法？
请提供任何参考或示例,谢谢.
如果你有需要在渲染时运行的函数并且必须传递变量,那么在本机做出反应时,大多数人建议应该使用
onPress{() => this.functionName(variable)}
但是,在处理大型列表和复杂组件时,您必须优化代码.为每个renderItem创建一个新函数可以flatList降低性能,有时甚至会很大,具体取决于您创建的每个renderItem的函数数量.所以建议从创建渲染函数到使用函数引用.像这样:
functionName = () => {
//code
}
onPress={this.functionName}
但是我无法弄清楚如何使用此方法将变量传递给函数.
如果你这样做:
onPress={this.functionName(variable}
它只会在组件负载上立即运行该功能.
有任何想法吗？