时间戳

首页 > 解决方案 > react 渲染中的箭头函数和绑定是否会导致问题和性能瓶颈？

javascript - react 渲染中的箭头函数和绑定是否会导致问题和性能瓶颈？

问题描述

所以我在今天的一次采访中遇到了一个问题，即在渲染中使用箭头函数和绑定是有问题的。

这是一段代码：

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)}有什么问题？我们通常不会以类似的方式编写函数和方法。

任何帮助，将不胜感激。

标签： javascriptreactjsarrow-functions

解决方案

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

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

它还指出，通常可以在渲染方法中使用箭头函数，但如果需要进一步优化，则不应在渲染中使用箭头函数。

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

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

推荐阅读