Почему синтаксис для компонентов высшего порядка реагирует часто в форме функции высшего порядка? Вместо лишних аргументов? - PullRequest
Новая
       58

Почему синтаксис для компонентов высшего порядка реагирует часто в форме функции высшего порядка? Вместо лишних аргументов?

0 голосов
/ 29 апреля 2020

Интересно, почему в реакции мы часто видим компоненты высшего порядка в форме: 

MyComponent = withSomeHOC(params)(function MyActualCompoent(props) {
    return <div/>
})

И реализация может выглядеть так: 

function withSomeHOC(params, modifier) {
    function(WrappedComponent) {
        return function(props) {
            //do whatever to modify something based on params.
            const data = modifier(React.useContext(someCTX));
            return <>
                <div>{data}</div>
                <WrappedComponent {...props}/>
            </>;
        }
    }
}

Вместо более логичный подход (для меня) просто добавить params в качестве второго (и третьего) параметра к самому компоненту высшего порядка: 

MyComponent = withSomeHOC(function MyActualComponent(props) {
    return <div/>
}, params, modifier);


function(WrappedComponent, params, modifier) {
    return function(props) {
        //do whatever to modify something based on params.
        const data = modifier(React.useContext(someCTX));
        return <>
            <div>{data}</div>
            <WrappedComponent {...props}/>
        </>;
    }
}

Почему мы почти не видим второй подход и почти всегда первый? В чем недостаток второго? Преимущество - более простая структура программы, а не глубоко вложенные компоненты и функции более высокого порядка.

Ответы [ 3 ]

2 голосов
/ 29 апреля 2020

Я полагаю, что одна из причин, по которой это так распространено, состоит в том, чтобы сделать композицию проще Если вы применяете несколько HoC к одному компоненту, вы можете получить трудный для чтения код, подобный следующему: 

export default withLogging(withRouter(withStuff(Component, arg1a, arg2a), arg1b), arg1c);

Рекомендовать или аналогичные библиотеки могут позволить вам превратить это в нечто большее читается через служебную функцию с именем compose. compose принимает последовательность функций и вызывает их по одной за раз, передавая выходные данные одной функции в качестве входных данных следующей.

Но для того, чтобы это работало, все эти функции должны быть одинарными (ie, они должны принимать ровно один аргумент). Таким образом, причина использования шаблона, о котором вы спрашиваете, заключается в том, что он позволяет вам легко создавать унарные функции, которым требуется только передача компонента в них. Тогда эти унарные функции могут быть составлены вместе.

Так что, если withLogging, withRouter и withStuff переписаны в соответствии с описанным вами шаблоном, то их можно использовать следующим образом: 

export default compose(
  withStuff(arg1a, arg2a),
  withRouter(arg1b),
  withLogging(arg1c),
)(Component)
1 голос
/ 29 апреля 2020

Для 1-й формы вы можете один раз сконфигурировать фабрику HO C, а затем использовать ее в другом месте.

На самом деле это шаблон декоратора Сорта. 

const preConfigDecorator = withSomeHOC(config)
const DecoratedComp1 = preConfigDecorator(Comp1)
const DecoratedComp2 = preConfigDecorator(Comp2)

Если ваш компонент является базовым классом, синтаксис будет более элегантным: 

@withSomeHOC(config)
class MyComp extends React.Component {
  …
}
0 голосов
/ 30 апреля 2020

Я читал о недавнем карри, и это: 

MyComponent = withSomeHOC(params)(function MyActualCompoent(props) {
    return <div/>
})

Мне кажется так: 

function(a)(a)

Из того, что я читаю, это писать более чистый код , Как сказал Николай. Не уверен, что есть какой-либо выигрыш в производительности. Вот ссылка на stackoverflow

Примечание: я все еще учусь.

...