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

无论如何，下面我想提出另一种使用findDOMNode而不是 refs 的方法：

我创建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

当您不需要使用任何生命周期方法或不需要更新组件状态时，功能组件非常有用。就您不需要它们而言，您很好，但最好使用无状态组件。

这不会影响性能问题，但会获得有关其性能的利润，因为我们只是简单地使用函数来渲染组件，而不关心它的更新、挂载、接收props等。但是使用无状态组件仍然没有 100% 的收益因为react内部使用类来呈现它们。

大约有 45% 的改进。

这篇文章还将指导在有状态组件和无状态组件之间选择哪一个。

此外，您不仅可以收到props，还可以收到参考：

const stateless = (props, ref) => <ReturnComponent {...props} ref={ref} />

好的，让我完善一下我的陈述。大多数博客甚至文档都指出无状态组件没有 ref。以下是针对此问题准备的一些问答：

我是否需要使用 statefull 组件才能使用 ref？

不。我已经提到如果我们必须使用组件状态或挂钩某些生命周期方法，我们必须要求基于类的组件。

如何在无状态组件中创建 ref？

const stateless = () => {

  // we can't do this.myRef = React.createRef()
  // so, let's create an object
  const RefObj = {}

  // now, create ref in {RefObj}
  RefObj.myRef = React.createRef()

  return <input type="text" ref={myRef} />
}