PureComponent 与无状态功能组件的性能答案

【问题标题】：Performance on PureComponent vs stateless functional componentPureComponent 与无状态功能组件的性能
【发布时间】：2018-03-18 22:18:09
【问题描述】：

考虑以下 React 代码：

class Todos extends React.Component {
  constructor(props) {
    super(props);
    this.state = { item: 'Test', };
  }

  render() {
    return <TodoItem item={this.state.item} />
  }
}


class TodoItem extends React.PureComponent {
  render() {
    return <div>{this.props.item}</div>
  }
}


function TodoItem(props) {
  return <div>{props.item}</div>
}

上面有一个有状态的父组件Todos和同一个子组件TodoItem的2个版本。其中一个版本是纯组件，另一个是无状态功能组件。

我了解使用 PureComponent 的性能优势，但我想知道 React 16 是否将相同的浅比较和性能优势应用于无状态功能组件？

如果不是，那为什么？似乎通过使用我告诉 React 我的组件没有状态，因此只有在父组件的状态发生变化时才会更新。

【问题讨论】：

无状态组件不应用 React 渲染生命周期。它没有状态，并且在收到新道具时总是重新渲染。所以答案是无状态组件总是更快，除非你不想触发渲染功能（例如：组件在窗口外）
@FisNaN 只是为了澄清一下，您是说无状态功能组件比 PureComponent 更快，后者只对传入的道具进行浅层比较？即使没有差异，功能组件是否总是重新渲染，因为它可能没有进行浅层比较？还是现在使用 React 16？
请考虑这个例子：codesandbox.io/s/2zoq5pw4r0 是的，无状态组件总是在收到不同的道具时更新（即使具有相同的值）。但是，因为它没有比较，所以它稍微快一点。这就是输入通常使用无状态的原因。列表项通常使用 PureComponent。
@FisNaN 我不明白为什么一个功能组件如果触发它的所有逻辑并且每次都不需要渲染会更快。 PureComponent 的浅层比较肯定会更快，因为它不会导致所有功能触发或渲染？

标签： javascript reactjs

【解决方案1】：

我了解使用 PureComponent 的性能优势，但我想知道 React 16 是否将相同的浅比较和性能优势应用于无状态功能组件？

不，还没有。 React 团队有迹象表明这将在未来发生变化，但截至今天，无状态功能组件在重新渲染方面仍然表现得像 React.Component。

如果您需要优化性能，请坚持使用 React.PureComponent 或 React.Component 实现 shouldComponentUpdate。请记住，如果您使用 redux 和 react-redux，connect() 将尝试为您处理函数式和基于类的组件的浅比较 (read up on in in the docs)。例如，您可能还想查看recompose and its onlyUpdateForKeys helper。

【讨论】：

谢谢，这对我来说很有意义，但我想知道为什么 FisNan 认为无状态功能组件会比 PureComponent 更快。我也关注 Airbnb eslint 配置，它说要使用无状态组件的功能......

【解决方案2】：

这实际上取决于您如何在 JSX 中调用纯组件。使用安装（如在您的 sn-p 中）时，它不会为您带来很多优化。 @Dominik 和 cmets 中的人们质疑描述原因。但是here guy 指出，将纯组件调用为函数可以提高 45% 的速度。 Todos 组件将如下所示：

class Todos extends React.Component {
  constructor(props) {
    super(props);
    this.state = { item: 'Test', };
  }

  render() {
    return TodoItem({ item: this.state.item });
  }
}

【讨论】：

从来没有想过要调用这样的函数式组件