我们应该避免在render内部绑定方法,因为在重新渲染期间它将创建新方法而不是使用旧方法,这会影响性能。
所以对于这样的场景:
<input onChange = { this._handleChange.bind(this) } ...../>
我们可以_handleChange
在构造函数中绑定方法:
this._handleChange = this._handleChange.bind(this);
或者我们可以使用属性初始化器语法:
_handleChange = () => {....}
现在让我们考虑一下要传递一些额外参数的情况,在一个简单的todo应用中说,项目的onclick我需要从数组中删除该项目,为此我需要在每个项目中传递项目索引或todo名称onClick方法:
todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)
现在,仅假定待办事项名称是唯一的。
根据 DOC :
这种语法的问题在于,每次渲染组件时都会创建一个不同的回调。
题:
如何避免在render方法中使用这种绑定方式,或者有什么替代方法?
请提供任何参考或示例,谢谢。
首先: 一个简单的解决方案是为map函数内部的内容创建一个组件并将值作为prop传递,当您从子组件调用该函数时,可以将值传递给props传递的函数。
父母
deleteTodo = (val) => {
console.log(val)
}
todos.map(el =>
<MyComponent val={el} onClick={this.deleteTodo}/>
)
我的组件
class MyComponent extends React.Component {
deleteTodo = () => {
this.props.onClick(this.props.val);
}
render() {
return <div onClick={this.deleteTodo}> {this.props.val} </div>
}
}
样本片段
class Parent extends React.Component {
_deleteTodo = (val) => {
console.log(val)
}
render() {
var todos = ['a', 'b', 'c'];
return (
<div>{todos.map(el =>
<MyComponent key={el} val={el} onClick={this._deleteTodo}/>
)}</div>
)
}
}
class MyComponent extends React.Component {
_deleteTodo = () => {
console.log('here'); this.props.onClick(this.props.val);
}
render() {
return <div onClick={this._deleteTodo}> {this.props.val} </div>
}
}
ReactDOM.render(<Parent/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
编辑:
第二: 另一种方法是使用备忘录并返回一个函数
constructor() {
super();
this._deleteTodoListener = _.memoize(
this._deleteTodo, (element) => {
return element.hashCode();
}
)
}
_deleteTodo = (element) => {
//delete handling here
}
并像这样使用
todos.map(el => <div key={el} onClick={this._deleteTodoListener(el)}> {el} </div>)
PS但是,这不是最佳解决方案,仍然会导致创建多个功能,但与初始情况相比仍是一个改进。
第三: 不过,更合适的解决方案是attribute
在最上面的div中添加an 并从event
like 获得值
_deleteTodo = (e) => {
console.log(e.currentTarget.getAttribute('data-value'));
}
todos.map(el => <div key={el} data-value={el} onClick={this._deleteTodo}> {el} </div>)
然而,在这种情况下,属性利用toString方法,并因此被转换成字符串,对象将被转换为[Object Object]
和与阵列等["1" , "2", "3"]
作为"1, 2, 3"
本文向大家介绍在React中如何避免不必要的render?相关面试题,主要包含被问及在React中如何避免不必要的render?时的应答技巧和注意事项,需要的朋友参考一下 shouldComponentUpdate、memoization、PureComponent
问题内容: 我已经在尝试使用ES6一段时间了,但是我遇到了一个小问题。 我真的很喜欢使用箭头功能,只要有可能,我都会使用它们。 但是,看来您无法绑定它们! 这是函数: 这是我要将功能绑定到的对象: 这就是我绑定的方式: 然后我可以打电话给: 哪个将输出此(对象): 凉!可爱!除非它不起作用。而不是输出对象,而是输出对象。 因此,我想知道:您可以绑定箭头功能吗?(如果是这样,如何?) 我已经在Goo
问题内容: 如何在Javascript和/或jQuery中将功能绑定到左右箭头键?我看了一下jQuery的js-hotkey插件(包装了内置的bind函数以添加一个参数来识别特定的键),但是它似乎不支持箭头键。 问题答案: $(document).keydown(function(e) { switch(e.which) { case 37: // left break; 将箭头键的自定义代码放在
问题内容: 我正在用我的React应用程序运行lint,并且收到此错误: 这是我运行箭头功能(在里面)的地方: 是否应避免这种不良做法?最好的方法是什么? 问题答案: 为什么您不应该在JSX props中使用内联箭头功能 在JSX中使用箭头函数或绑定是不利于性能的不良做法,因为该函数会在每个渲染器上重新创建。 每当创建一个函数时,就会对前一个函数进行垃圾回收。渲染许多元素可能会在动画中产生垃圾。
问题内容: 最近,我开始修补React.js,我喜欢它。我开始使用常规的ES5,以便掌握所有内容,所有文档均使用ES5编写… 但是现在我想尝试一下ES6,因为它有光泽而且是新的,而且似乎确实简化了某些事情。让我感到困扰的是,对于我添加到组件类中的每个方法,现在都必须将“ this”绑定到该方法,否则它将无法正常工作。所以我的构造函数最终看起来像这样: 如果我要在类中添加更多方法,这将变得更大,更难
问题内容: 我可以使用关键字将javascript函数标记为“异步”(即返回承诺)。像这样: 箭头功能的等效语法是什么? 问题答案: 异步 箭头函数 如下所示: 传递给它的 单个参数的 异步 箭头函数 如下所示: __ 该 匿名 形式的作品,以及: 异步函数 声明 如下所示: 在 回调中 使用异步函数: