Question

我一直在看反应重构库并尝试在这里掌握差异，结果是一样的，试图阅读文档，但更加困惑，为什么有两种方法可以做同样的事情？

const enhance = compose(
  withState('counter', 'setCounter', 0),
  withHandlers({
    increment: props => () => props.setCounter(n => n + 1),
    decrement: props => () => props.setCounter(n => n - 1)
  })
)

const enhance = compose(
  withState('counter', 'setCounter', 0),
  withProps(({ setCounter }) => ({
    increment: () => setCounter(n => n + 1),
    decrement: () => setCounter(n => n - 1)
  }))
)

Answer 1

它主要与性能相关，因为withHandlers不会在每次渲染时创建新函数。来自related Github issue：

withProps每次更新时都会创建新函数;上   另一方面，withHandlers不会创建新功能。
     当您想要将这些功能传递给其他人时，
withHandlers非常有用   通过比较道具来实现shouldComponents的组件   浅浅的（就像recompose/pure做的那样）。

Answer 2

除了Fabian Schultz的回答，请注意withProps可用于添加任何类型的道具，而withHandlers只能添加功能。

因此，当您添加功能时，请尽可能使用withHandlers以提高性能。当您添加其他内容时，请使用withProps（如果您要删除所有其他道具，请使用mapProps。）

WithProps vs withHandlers

2 个答案: