我发现 React 文档中存在一些差异。在关于 Components and Props 的部分,他们通过一个功能性 Welcome
组件的例子解释说
React calls the
Welcome
component with{name: 'Sara'}
as the props.
很公平,因为组件是一个纯函数。然后在State and Lifecycle ,他们提到,通过 class Clock
组件的例子,
React calls the constructor of the
Clock
component. [...] React then calls the Clock component’srender()
method.
来自阅读文档,以及 this Medium post ,具有功能组件,
- 组件作为函数直接调用,带有
props
对象 - 它返回一个 React 元素,即模拟要呈现的 DOM 元素的对象
- 然后 React DOM 创建一个 DOM 节点并将其插入“真实”DOM
流程与基于类的组件不同:
- 实例化组件类并将对象实例存入内存
- 调用 render 方法并返回 React 元素(对象)
- 由其类实例支持的 React 元素被 React DOM 用于生成和挂载实际的 DOM 节点
根据这篇文章,最大的区别在于“功能组件没有实例”,这意味着它们是直接调用的。 React DOM“只是使用函数的调用来确定要为函数呈现的 DOM 元素”。
但是,这与其他来源不一致。例如,here和 here Dan Abramov 提到功能组件在内部是类。换句话说,React 只是将一个功能组件包装到一个类中并实例化它,就好像它是一个类组件一样。 Another article甚至可以说前者比后者更慢。
问题
- React 是否将功能组件转换为类组件?
- 使用功能性的(而不是)是否有任何性能优势 比类组件? (例如 here 它说还没有好处,我假设在 React Fiber 之前?)
- 我真的应该牺牲我的工作流程吗? 可以在整个应用程序中具有状态,它在逻辑上适合,例如树深处某处的表单/受控组件?
最佳答案
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.
来自 Dan Abramov 的推特帖子。
使用函数式组件而不是类组件是否有任何性能优势?
显然现在没有性能优势,因为 React 在功能组件上做了很多事情,这会降低性能。阅读this获得更多的理解。
我真的应该牺牲我的工作流程吗
我猜不是
关于javascript - 功能组件是否在底层变成了类组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48593856/