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

Question

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

Answer 1

Может использоваться вместо 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>
));

Answer 2

ветвь от перекомпоновки - один из лучших способов избежать if-else в ваших компонентах

       branch(
   condition,
   leftHOC,
   rightHOC
)(MyComponent)

если условие истинно, то

MyComponent передается в leftHOC, иначе он передается вправо.

Предположим, вам нужно показать состояние загрузки до тех пор, пока данные не станут доступны, тогда мы также можем использовать renderComponent из перекомпоновки.

       branch(
   props=>props.loading,
   renderComponent(Loader),
   myComponent=>myComponent,
)(MyComponent)

Answer 3

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

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

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