Question

在React quickstart中，说明了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？

Answer 1

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

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

Answer 2

在阅读ref上的文档时，我遇到了同样的疑问。但是，在进行了更多研究之后，我发现了这一讨论。（https://github.com/facebook/react/issues/4936#issuecomment-142379068）

功能组件没有实例，因为它们仅仅是JS函数。一个函数不能有一个实例。而类具有它们的实例（对象）。

因此，当文档中说您不能对功能组件使用ref时，因为它们没有实例，这意味着->如何在功能组件的实例不存在时存储它？

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

2 个答案: