javascript - 功能组件是否在底层变成了类组件?

标签 javascript reactjs components

我发现 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’s render() method.

来自阅读文档,以及 this Medium post ,具有功能组件,

  1. 组件作为函数直接调用,带有props对象
  2. 它返回一个 React 元素,即模拟要呈现的 DOM 元素的对象
  3. 然后 React DOM 创建一个 DOM 节点并将其插入“真实”DOM

流程与基于类的组件不同:

  1. 实例化组件类并将对象实例存入内存
  2. 调用 render 方法并返回 React 元素(对象)
  3. 由其类实例支持的 React 元素被 React DOM 用于生成和挂载实际的 DOM 节点

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

但是,这与其他来源不一致。例如,herehere 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/

相关文章:

javascript - 单击启动按钮时,开始按钮不显示问题

javascript - 使用带有外部数据的 c3.js 的堆叠列

javascript - 将 javascript/css 插入跨不同域的 iframe

database - 将 Electron 与数据库文件一起使用

components - 如何使用jira处理多个类似的项目

methods - 将多个参数传递给 react 组件

javascript - 如何在文本框中写入内容直到用户单击它

javascript - Chrome中的音频时间戳不正确

javascript - onFocus 不会触发显示和隐藏列表项

javascript - 如何在 Angular 2+ 中从父组件更改子组件的 HTML/CSS?