首页 文章

功能组件是否成为引擎盖下的类组件?

提问于
浏览
4

我发现React docs有点不一致 . 在Components and Props一节中,他们通过 functional Welcome 组件的例子解释了

React使用{name:'Sara'}作为道具调用Welcome组件 .

考虑到该组件是一个纯粹的功能,足够公平 . 然后在State and Lifecycle中,他们通过 class Clock 组件的例子提到

React调用Clock组件的构造函数 . [...]然后React调用Clock组件的render()方法 .

从阅读文档,以及this Medium post,与 functional 组件,

  • 该组件作为 props 对象的函数直接调用

  • 它返回一个React元素,即一个对要渲染的DOM元素进行建模的对象

  • 然后,React DOM创建DOM节点并将其插入"real" DOM

流程与 class-based 组件不同:

  • 实例化组件类,并将对象实例存储在内存中

  • 调用render方法并返回React元素(object)

  • React元件以其类实例为后盾,由React DOM用于生成和挂载实际的DOM节点

根据文章,最大的区别在于“函数组件没有实例”,这意味着它们是直接调用的 . React DOM“只使用函数的调用来确定为函数呈现的DOM元素” .

但是,这与其他来源不一致 . 例如,herehere Dan Abramov提到功能组件是内部类 . 换句话说,React只是将一个功能组件包装到一个类中并实例化它,就像它是一个类组件一样 . Another article甚至说前者甚至比后者慢 .

问题

  • 功能组件是否被React转换为类组件?

  • 使用功能组件而不是类组件是否有任何性能优势? (例如here它说没有任何好处,我假设在React Fiber之前?)

  • 我是否真的应该牺牲我的工作流程,如果我可以在整个应用程序中使用状态,它在逻辑上适合的位置,例如树形深处的某个形式/受控组件?

1 回答

  • 1

    Are functional components converted into class components by React?

    对于它们(功能组件)没有“优化”支持,因为无状态组件在内部包装在类中 . 这是相同的代码路径 .

    来自Dan Abramov的推特帖子 .

    Is there any performance benefits to using functional, rather than class components?

    显然现在没有性能优势,因为React在功能组件上做了很多事情,降低了性能 . 阅读this以获得更多理解 .

    Should I really sacrifice my workflow

    我猜不会

相关问题