为什么 reactjs 中的功能组件没有实例?

IT技术 reactjs ecmascript-6 es6-class
2021-05-06 22:36:42

阵营快速启动,更说明有关Refs and Functional Components

您不能在功能组件上使用 ref 属性,因为它们没有实例:

function MyFunctionalComponent() {
  return <input />;
}

class Parent extends React.Component {
  render() {
    // This will *not* work!
    return (
      <MyFunctionalComponent
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

我不完全理解上述陈述和示例。到目前为止,功能组件和类组件之间的唯一区别在于,后者可以具有构造函数和生命周期管理功能之类的东西。

文档说功能组件没有实例是什么意思?是因为他们没有this指针吗?这个限制是来自 React 还是 ES6?

2个回答

功能组件在每次虚拟 DOM 更新时从上到下重新渲染。由于它们是简单的纯函数,因此它们只接受属性并输出一块虚拟 DOM。它们的寿命仅限于单个渲染。

默认的 React 组件扩展了 React.component 类,因此它们继承了生命周期钩子和内部状态管理等特性。这些特性允许组件在渲染之间保持它们的状态并做出相应的行为。从这个意义上说,我会称它们为具有实例的组件。

我在阅读 ref 上的文档时遇到了同样的疑问。然而,在做了更多的研究之后,我发现了这个讨论。( https://github.com/facebook/react/issues/4936#issuecomment-142379068 )

函数式组件没有实例,因为它们只是 JS 函数。函数不能有实例。而类具有它们的实例(对象)。

因此,当文档说您不能在功能组件上使用 ref 时,因为它们没有实例意味着 -> 如果功能组件不存在,您如何存储它的实例?