反应，为每个事件绑定新功能的效率低下 [英] React, ineffiencies of binding a new function for each event
问题描述
我和我的朋友正在吵架。为了充分公开，我是React和它的好处的忠实拥护者。
My friend and I are having an argument. In the interest of full disclosure, I'm the one who's a big fan of React and its benefits.
在React组件中，当将DOM事件附加到其中的每个元素时元素列表，传统模式是 bind（）具有要传递给该函数的值作为参数的通用单击处理程序。如下所示：
In React components, when attaching a DOM event to each element in a list of elements, the traditional pattern is to bind() the generic click handler with the values you want to pass along to that function as parameters. As written below:
<button onClick={this.onButtonClick.bind(this, buttonIndex)}></button>
其中， buttonIndex 是一些随着按钮列表被迭代。这种模式允许 onButtonClick 是通用的，并期望 buttonIndex 作为参数。像这样：
where buttonIndex is some value that changes as the list of buttons is iterated over. This pattern allows onButtonClick to be generic, and expect buttonIndex as a parameter. Like so:
onButtonClick: function(buttonIndex) {
... some logic
}
我的朋友认为这种处理方式效率极低。这就要求创建一个新功能并将其保存在内存中，以处理每个按钮的事件。我同意他的观点，但是我认为React开发人员不会鼓励这种模式在他们的文档中，（至少两次）如果库没有有效地处理事件及其处理程序。
My friend argues that this way of doing things is extremely inefficient. This requires that a new function be created and kept in memory to handle each button's event. I agree with his point, but I feel that the React devs wouldn't encourage this pattern in their docs, (at least twice) if the library didn't efficiently handle the events and their handlers.
他用来避免这种情况的模式是使用 data- 属性，并从DOM元素本身获取值（在本示例中为 buttonIndex ）：
The pattern he used to avoid this was to use the data- attribute and get the value (in this example, buttonIndex) off the DOM element itself:
<button data-buttonIndex={buttonIndex} onClick={this.onButtonClick}></button>
...
onButtonClick: function() {
var buttonIndex = $(this).data('buttonIndex');
...some logic
}
我还是有偏见我是React的粉丝但这感觉不对，有两个原因：
Again, I'm biased cus I'm the React fan. But this feels wrong, for two reasons:
- 从DOM中获取值以传递数据（如 state ）有点在很多方面破坏了React的目的，对吧？
-
data-属性在我看来是非常模棱两可的。可以从几个不同的位置（HTML，JS，PHP等）进行设置。而且他们没有暗示任何隐含的目的。该数据可以在任何地方使用（JS，CSS等）
- Getting values off the DOM to pass data around (as state) kinda defeats the purpose of React in a lot of ways, right?
data-attributes are extremely ambiguous in my opinion. They can be set from several different places (HTML, JS, PHP, etc.). And they don't suggest any implicit purpose. That "data" could be used anywhere, (JS, CSS, etc.)
React可以做一些特殊的魔术来提高效率吗？它的DOM事件？如果没有，是否还有一种替代模式，该模式不使用 data-属性，并且更明确地使用它？
Does React do some special magic to be efficent with its DOM events? And if not, is there an alternative pattern that doesn't use the data- attribute and is more explicit about its use?
推荐答案
我不确定这是个好主意，但是...请记住！
I'm not sure this is a good idea, but... memoize!
class Foo {
constructor(){
this.getClickHandler = _.memoize(this.getClickHandler);
}
getClickHandler(index){
return (event) => {
doSomething();
};
}
render(){
// ...
<button onClick={this.getClickHandler(index)}>Click me</button>
// ...
}
}
这种方式您可以避免创建新函数，避免数据属性以及避免在dom中查找任何内容的性能成本。
This way you avoid creating a new function, avoid data-attributes, and avoid the performance cost of looking up anything in the dom.
我认为我从未分析过并发现在render中创建函数不是问题。绝对只有在数字告诉您这样做时，您才应该优化它。
I don't think I've ever profiled and found creating functions in render to be an issue. This is definitely something you should optimize only when the numbers tell you to do so.
这篇关于反应，为每个事件绑定新功能的效率低下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
