reactjs - props 使用 compose() 以哪种方式流动？

Question

考虑以下：

const Foo = defaultProps({
        foo: "foo"
});

compose(
    Foo,
    LoadJson,
    RunParser
)(Bar);

在这种情况下，道具会foo流过LoadJson->RunParser->Bar吗？还是以相反的顺序，从哪里foo流过RunParser->LoadJson->Bar？

有没有更好的方法来从概念上设想这一点，而不是像那样的线性流动？

Answer 1

正如您在此处看到的，道具从左到右流动，这意味着已在左侧定义的道具对右侧的 HOC 可见。所以在你的情况下， LoadJson 和 RunParser 应该看到道具foo

const enhance = compose(
    withProps({
    offset: 10,
  }),
  withState('count', 'updateCount', 0),
  withHandlers({
    increment: props => () => props.updateCount(n => n + 1 + props.offset),
    decrement: props => () => props.updateCount(n => n - 1)
  })
)

const Counter = enhance(({ count, increment, decrement }) =>
    <div>
    Count: {count}
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  </div>
)