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

我确信这样做，

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>
      ))
    )
  }
}

QUES-2：

这更多地取决于实施细节。据我所知，如果你返回相同的对象而没有与store.getState（）进行任何比较并且操纵对象（我可能也错了），它将只被加载一次。

Answer 2

mapDispatchToProps函数会返回您已将其写回的任何内容。在您的示例中，它将在运行时返回一个新的pressCard()函数作为道具。

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

如果你声明你的mapDispatch函数有两个参数，它将被包装组件的道具作为第二个参数调用，如下所示：

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

在这种情况下，只要传入的道具发生变化，它就会再次被召唤，但这可能不适用于每次发送的动作＆＃34;。

有一个＆＃34;对象简写＆＃34;绑定方法的语法，使用起来更简单：

const actions = {
    pressCard : homeActions.pressCard
}

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

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

2 个答案: