箭头功能和绑定到react的渲染中会导致问题和性能瓶颈吗？

Question

所以今天在我的一次采访中，我遇到一个问题，即使用箭头功能并在render中绑定是有问题的。

这是一段代码：

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { id: 1, name: "Cory" },
        { id: 2, name: "Meg" },
        { id: 3, name: "Bob" }
      ]
    };
  }

  deleteUser = id => {
    this.setState(prevState => {
      return {
        users: prevState.users.filter(user => user.id !== id)
      };
    });
  };

  render() {
    return (
      <div>
        <h1>Users</h1>
        <ul>
          {this.state.users.map(user => {
            return (
              <User
                key={user.id}
                name={user.name}
                id={user.id}
                onDeleteClick={() => this.deleteUser(user.id)} // Isn't this okay?
              />
            );
          })}
        </ul>
      </div>
    );
  }
}

onDeleteClick={() => this.deleteUser(user.id)}这行代码有问题吗？我们通常不以类似的方式编写函数和方法。

任何帮助将不胜感激。

Answer 1

正如@keikai在文档中指出的那样：

每次渲染组件时，在render中使用箭头函数都会创建一个新函数，这可能会破坏基于严格身份比较的优化。

[它还指出，通常可以在render方法中使用箭头功能，但是在需要进一步优化的情况下，您不应在渲染中使用箭头功能。

此外，每次渲染组件时，在render方法中使用bind也会创建一个新函数。

解决方案：将函数绑定到构造函数中（或在类中使用箭头函数），并将其传递给prop作为参考，并在子组件内部适当地调用它。

Answer 2

在大多数情况下，这很好。了解那里发生的事情很重要：每次执行该行代码并使用一点RAM时，都会定义匿名箭头函数() => this.deleteUser(user.id)。

定义一个新的匿名函数要花多少钱？它取决于JavaScript引擎，但通常不多。

让我们推断一下：假设users列表中有一百万个条目病。单个组件很可能会使浏览器在任何计算机上都进行爬网。但是在这种荒谬的场景中，首先需要考虑many other places for code optimization-甚至是为了避免这种情况而进行的设计优化-并且只有在应用了最相关的之后，才担心onDeleteClick的具体情况，因为它的影响如此小。