javascript - redux "presentation"组件中带有参数的 onClick 函数

Question

将对象作为参数传递给 redux“表示组件”中的函数的最佳方法是什么？

我有一个 <BookList />容器组件。在 BookList 中，我呈现一个 <BookListRow/>每本书的演示组件。

我想在每个 BookListRow 中创建一个按钮来删除这本书。所以我这样做:

const BookListRow = ({book, deleteBook}) => {
  return (
    <tr>
      <td>
        <button className="btn btn-sm btn-danger"
                onClick={() => {deleteBook(book}}
        >
          <i className="glyphicon glyphicon-remove"></i>
        </button>
      </td>
      <td><a href={book.watchHref} target="_blank">Watch</a></td>
      <td><Link to={'/book/' + book.id}>{book.title}</Link></td>
      <td>{book.authorId}</td>
      <td>{book.category}</td>
      <td>{book.length}</td>
    </tr>
  );
};

这行得通!但我读到，由于性能不佳，最好避免在 JSX 中使用箭头函数。那么有什么更好的方法呢？

Answer 1

您可以使用类组件:

class BookListRow extends React.Component {
  onBtnClick = () => {
    this.props.deleteBook(this.props.book);
  };

  render () {
    return (
      ...
        onClick={this.onBtnClick}
      ...
    )
  }
}

如果要使用无状态的函数式组件，我觉得可以使用memoization来优化

我在这里写了一个非常简单的概念证明:http://codepen.io/CodinCat/pen/NpwLRE?editors=0011

真正的onclick函数只会声明一次。我们将它们保存到 Map 中，以便每次父组件重新渲染时，我们都可以重用它们。

上面的例子只是一个非常简单的PoC。它仅在从父级传递的 onClick 方法不会动态更改时才有效。

有一些内存库，比如https://github.com/caiogondim/fast-memoize.js