иональный компонент без сохранения состояния - это просто функция, которая получаетprops и возвращает элемент React:

const Foo = props => <Bar />;

Сюда<Foo {...props} /> (Т.е.React.createElement(Foo, props)) в родительском компоненте может быть опущено в пользу вызоваFoo непосредственно,Foo(props), такReact.createElement крошечные накладные расходы могут быть устранены, но это не является необходимым.

Считается ли плохой практикой вызывать функциональные компоненты напрямуюprops аргумент, а почему? Каковы возможные последствия этого? Может ли это негативно повлиять на производительность?

Мой конкретный случай состоит в том, что есть некоторый компонент, который является мелкой оберткой над элементом DOM, потому что это было сочтено хорошей идеей третьей стороной:

function ThirdPartyThemedInput({style, ...props}) {
  return <input style={{color: 'red', ...style}} {...props} />;
}

Вотдемонстрация это показывает этот случай.

Это общепринятая практика, но проблема в том, что невозможно получитьref обернутого элемента DOM из функции без сохранения состояния, поэтому компонент используетReact.forwardRef:

function withRef(SFC) {
  return React.forwardRef((props, ref) => SFC({ref, ...props}));
  // this won't work
  // React.forwardRef((props, ref) => <SFC ref={ref} {...props } />);
}

const ThemedInput = withRef(ThirdPartyThemedInput);

Таким образом, его можно использовать как:

<ThemedInput ref={inputRef} />
...
inputRef.current.focus();

Очевидный недостаток, который я знаю, заключается в том, чтоwithRef требует, чтобы разработчик знал о реализации упакованного компонента, что не является обычным требованием для HOC.

Считается ли это правильным подходом в ситуации, подобной описанной выше?