直接调用功能组件

无状态功能组件只是一个接收函数props并返回 React 元素：

const Foo = props => <Bar />;

这边走<Foo {...props} /> (i.e. React.createElement(Foo, props)) 在父组件中可以省略以支持调用Foo直接地，Foo(props), so React.createElement可以消除微小的开销，但这不是必要的。

直接调用功能组件是否被认为是一种不好的做法props争论，为什么？这样做可能会产生什么影响？这会对性能产生负面影响吗？

我的具体情况是，有一些组件是 DOM 元素的浅包装器，因为第三方认为这是一个好主意：

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

这是一个demo https://stackblitz.com/edit/react-1tdafv这表明了这种情况。

这是被广泛接受的做法，但问题是它不可能得到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 的通常要求。

在上述情况下，这是否被认为是正确的方法？

我不认为直接调用无状态功能组件有什么问题。正如您所说，这甚至消除了一点点开销。至于可能产生的影响，可以大胆地说没有影响，将来也不会产生影响，因为这是一种非常罕见的使用证监会的方式。但一切都表明结论不应该有任何影响（只是少了一个函数调用）。

无论如何，下面我想介绍另一种方法来使用findDOMNode而不是参考文献：

我已经创建了Focus使用起来确实很方便，但需要首先初始化的组件（因为我们需要一种在 props 之外触发焦点的方法，因为组件可能会使用相同的 props 重新渲染）：

// focus.js
import React from "react";
import { findDOMNode } from "react-dom";

export default function createFocus() {
  class Focus extends React.Component {
    componentDidMount() {
      Focus.now = () => {
        findDOMNode(this).focus();
      }
    }
    render() {
      return this.props.children;
    }
  }

  return Focus;
}

// index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import createFocus from './focus';

const Focus = createFocus();

import { ThirdPartyThemedInput } from './third-party-lib';

function App() {
  return (
    <div>
      <button onClick={() => Focus.now()}>Proceed with form</button>
      <Focus>
        <ThirdPartyThemedInput placeholder="Fill me" />
      </Focus>
    </div>
  );
}

render(<App />, document.getElementById('root'));

住在：https://stackblitz.com/edit/react-bpqicw https://stackblitz.com/edit/react-bpqicw