Question

在反应文档中，我读到：

这种模式旨在鼓励创造这些简单的应该包含大部分应用的组件。在里面未来，我们还能够进行特定的性能优化通过避免不必要的检查和记忆来对这些组件分配。

关于github有几个讨论，比如this，但这些讨论已经很老了，我想问的是，如果在React v16.0或之前为隐式shouldComponentUpdate等功能组件做了任何优化如果这些优化完成那么那些是什么？

Answer 1

因此，对于FSC（功能无状态组件）而言，没有任何关于类组件的性能提升的官方文档。但是，我遇到了this well written medium article，它解释了如何使用FSC获得性能提升。

TLDR：直接调用功能组件作为函数而不是使用React.createElement安装它们要快得多。

例如，FSC看起来像这样：

+-----------------------+
|        Result         |
+-----------------------+
| 12340001234XXXX       |
| 12340001234000000XXXX |
| 1234XXXX              |
| NULL                  |
+-----------------------+

我们通常使用这些组件的方式是使用JSX组件语法：

const Avatar = (props) => {
  return <img src={props.url} />;
}

但是，通过一些仔细的基准测试和探索，通过将FSC称为功能，作者能够将速度提高约45％：

不要将它们作为组件安装，而是将它们称为实际内容：纯JavaScript函数。

<Avatar url="/path" />

我认为从这种方法中获得性能增益实际上取决于你的应用程序结构，但我认为这是一个可能非常有用的巧妙技巧。

Answer 2

从v16.0.0开始，对无状态组件没有进行任何优化。从v15和v16完成的更改是

fragments，error boundaries，portals，support for custom DOM attributes，improved server-side rendering和reduced file size。

您可以看到 React Blog 了解有关此更改的详细信息

Answer 3

我所知道的唯一当前优化是无法创建或保留无状态组件的实例对象。因此，每个渲染实例会创建一个较少的对象并将其存储在内存中。

如何在React v16.0中优化无状态组件？

3 个答案: