Question

对任何喜欢反应的人来说只是一个简单的问题

我已经制作了jsbin example并且我正在尝试观察是否正在对无状态组件进行任何内存优化

如果你堆转那个窗口，你应该能够看到BsDiv实例。这是否意味着我使用的所有组件都将在运行时保留？

（我自己没有提到任何对象）

我很担心这一点，因为反应组件是由其他组件组成的等等 - 这意味着任何Panel，Alert以及我愿意使用的任何内容都很容易就像5个实例。

预计会这样吗？

Answer 1

首先：请注意，React具有无状态功能组件的特殊语法。您的示例代码不使用该语法，因此React不知道您的组件是无状态的。

这是不无状态功能组件：

class BsDiv extends React.Component{
  render(){
    return (<div className={this.props.cls}>{this.props.children}</div>)
  }
}

这些是无状态功能组件：

// component is just a function
const BsDiv = props => <div className={props.cls}>{props.children}</div>

// Using object destructuring syntax
const BsDiv = ({cls, children}) => <div className={cls}>{children}</div>;

第二：React尚未对无状态功能组件进行任何重要的优化。

来自their blog（强调我的）：

此模式旨在鼓励创建应包含大部分应用的简单组件。 将来，我们还可以通过避免不必要的检查和内存分配，对这些组件进行性能优化。

因此，通过编写无状态功能组件，您可以选择React为这个“更简单”的组件做出未来的优化。

以下是有关未来可能优化的更多信息：

https://github.com/facebook/react/issues/5677#issuecomment-165125151

How will React 0.14's Stateless Components offer performance improvements without shouldComponentUpdate?

Answer 2

好消息和坏消息。

首先是坏消息。你正在观察的是正确和预期的。 React组件只是JavaScript对象，因此每个实例都将单独分配。此外，React组件的叶子通常会为每个渲染组件生成许多虚拟DOM组件，这些组件也都在内存中。

然而好消息非常好。在React中，我们通常只呈现页面上可见的内容。因此在实践中，内存分配很少成为问题。例如，在JQuery样式框架中，渲染Web应用程序的所有选项卡是常见的，无论它们是否可见。选项卡切换然后只设置一个＆＃34;可见＆＃34;选定选项卡上的类。相比之下，在React中，除非选中了选项卡，否则通常不会呈现未选中选项卡的内容。

为什么无国籍成分会吃掉记忆

2 个答案: