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

时间:2018-02-03 04:12:40

标签: javascript reactjs components

我发现React docs有点不一致。在Components and Props部分,他们通过功能性 Welcome组件的示例解释了

  

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

考虑到组件是纯函数,这是公平的。然后在State and Lifecycle中,他们通过 Clock组件的示例提及

  

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

通过阅读文档以及this Medium post,使用功能组件,

  1. 该组件作为props对象
  2. 的函数直接调用
  3. 它返回一个React元素,即一个对要渲染的DOM元素进行建模的对象
  4. React DOM然后创建DOM节点并将其插入到" real" DOM
  5. 基于类组件的流程不同:

    1. 实例化组件类,对象实例存储在内存中
    2. 调用render方法并返回React元素(object)
    3. 由其类实例支持的React元素由React DOM用于生成和挂载实际的DOM节点
    4. 根据文章,最大的区别在于"功能组件没有实例",这意味着它们是直接调用的。 React DOM"只是使用函数的调用来确定为函数提供的DOM元素"。

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

      问题

      • 功能组件是否由React转换为类组件?
      • 使用功能是否还有(但)有任何性能优势 比班级组件? (例如here它说没有任何好处,我假设在React Fiber之前?)
      • 如果我,我真的应该牺牲我的工作流程吗? 可以在应用程序中具有状态,在逻辑上适合它,例如树形深处的某个表格/受控组件?

1 个答案:

答案 0 :(得分:1)

Are functional components converted into class components by React?

There is no “optimized” support for them (functional component) yet because stateless component is wrapped in a class internally. It's same code path.

From a twitter thread by Dan Abramov.

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

Apparently right now there is no performance benefits because React does a lot of things on Functional Components which decreases performance. Read this to gain more understanding.

Should I really sacrifice my workflow

I guess not