почему и когда использовать перекомпоновать ветку

Question

Я искал вокруг и после прочтения некоторых вещей, я все еще не получил, когда я использую выражение recompose branch сверх if-else в реакции или зачем вообще его использовать?Кто-нибудь может упомянуть хороший источник или объяснить это?спасибо

Answer 1

В то время как ответ Estus достаточно хорош и отвечает, как используется вместо if..else или троичного оператора, я хотел бы упомянуть друг о друге случаи использования ветвления, которые мы используем в нашем проекте, когда мы хотим отобразить компонент внутри другогокомпонент, основанный на некоторых условиях с помощью renderComponent (), который полезен в сочетании с branch () (в нашем проекте мы обычно используем его для рендеринга немых компонентов, модальных компонентов и т. д.)

branch<WrappedProps>(
  props => props.success,
  renderComponent(ShowSuccessModal)
)

Так что в этомНапример, когда props.success в нашем контейнере становится истинным, модальный компонент будет отображаться.

Answer 2

Может использоваться вместо if..else или троичного оператора, где предпочтительна композиция функций.Recompose предоставляет состав функции для компонентов React.Как и другие Рекомендовать компоненты более высокого порядка , branch HOC может быть составлен с compose:

const fooPredicate = ({ type }) => (type === 'foo');
const FooHOC = Comp => props => <Comp ...props>Foo</Comp>;
const BarHOC = Comp => props => <Comp ...props type="bar">Bar</Comp>;
const FooOrBarHOC = branch(fooPredicate, FooHOC, BarHOC);
const SomeHOC = compose(BazHOC, FooOrBarHOC);
const SomeExampleComponent = SomeHOC(ExampleComponent);

Все функции, включенные в SomeExampleComponent, могут использоваться повторно и могут быть протестированы и использованыотдельно друг от друга.

В случае, если случай прост, и эти функции не предполагается использовать с каким-либо компонентом, кроме ExampleComponent, его можно упростить до:

const SomeExampleComponent = BazHOC(props => (
  props.type === 'foo'
  ? <ExampleComponent ...props>Foo</ExampleComponent>
  : <ExampleComponent ...props type="bar">Bar</ExampleComponent>
));