每次更新状态时，redux mapDispatchToProps 会创建新函数吗？

Question

通过使用 .bind 或在 JSX 道具中使用箭头函数。绑定调用或 JSX 道具中的箭头函数将在每个 单次渲染。

这是否意味着以下示例会在每次组件重新渲染时创建cardList.length 的新函数() => props.pressCard(card)？

const cards = cardList.map(card =>
      <TouchableOpacity key={card.id} onPress={() => props.pressCard(card)}>
        <Card {...card} />
      </TouchableOpacity>
  );

如果是这样的话，Redux 的mapDispatchToProps 呢？例如，

const mapDispatchToProps = (dispatch) => ({
    pressCard: (card) => dispatch(homeActions.pressCard(card))
});

当组件中的状态更新时，它是否也会创建新函数？

Answer 1

mapDispatchToProps 函数返回您编写的返回值。在您的示例中，它将在运行时返回一个新的 pressCard() 函数作为道具。

但是，默认情况下，connect 只会在创建组件实例时调用一次您的 mapDispatch 函数。它不会在调度动作时再次调用它。

如果您将 mapDispatch 函数声明为带有两个参数，它将使用包装组件的 props 作为第二个参数调用，如下所示：

const mapDispatchToProps = (dispatch, ownProps) => ({
    pressCard: (card) => dispatch(homeActions.pressCard(card, ownProps.itemId))
});

在这种情况下，只要传入的 props 发生变化，它就会再次被调用，但这可能不适用于“每个调度的动作”。

绑定方法有一个“对象速记”语法，使用起来更简单：

const actions = {
    pressCard : homeActions.pressCard
}

export default connect(mapState, actions)(MyComponent);

Answer 2

我确信这样做，

onPress={() => props.pressCard(card)

创建 cardList.length 新函数

解决这个问题的方法是使用类创建组件并在构造函数中绑定一次函数，

例如：

class Card extends React.Component {
  constructor(props) {
    super(props)

    this.handlePressCard = this.handlePressCard.bind(this)
  }
  handlePressCard(e) {
    const card = e.currentTarget.dataset.id
    // Find the card with the above `id`
    this.props.pressCard(card)
  }
  render () {
    return (
      cardList.map((card) => (
        <TouchableOpacity key={card.id} data-id={card.id} onPress={this.handlePressCard}>
          <Card {...card} />
        </TouchableOpacity>
      ))
    )
  }
}

问题 2：

这更多地取决于实现细节。据我所知，如果您返回相同的对象而不与 store.getState() 进行任何比较并操作该对象（我也可能是错的），它将只加载一次。