Question

我一直在阅读有关表演的文档，但我无法找到问题的答案......

我的应用程序上有一堆按钮会基于某些属性而不是状态进行渲染，父组件永远不会更改其属性。然后我有这个onKeyDown事件处理程序，它将侦听一些键并更新另一个组件。

我的问题是，当按下按键并更新这个组件时，所有其他按钮也会渲染（通过适用于Chrome的React开发工具观察）。我没有在我的按钮上实现shouldComponentUpdate(nextProps, nextState)，但是默认情况下React不应该有这种行为吗？我的意思是，将this.props与nextProps进行比较，如果它们完全相同，请不要致电render()？

我是否应该自己为应用程序启动时只应呈现一次的每个组件执行此操作？

编辑： PureComponent似乎解决了这个问题......但我没有创建新问题，而是使用相关问题更新此问题：

为什么文档不建议默认使用基于PureComponent的所有组件？默认情况下使用PureComponent而不是典型Component的参数有哪些？

Answer 1

纯组件应解决您的问题，因为默认情况下它们会实现浅支撑和状态比较。

Link to the docs.

如果React组件的render（）函数在给定相同的props和state的情况下呈现相同的结果，则在某些情况下可以使用React.PureComponent来提升性能。

Answer 2

确保React组件仅呈现一次的一种方法是使shouldComponentUpdate返回false：

class MyComponent extends React.Component {

  shouldComponentUpdate = () => false

  render() {
    return <div>{ this.props.children }</div>;
  }
}

在上面的示例中，即使this.props.children发生更改，该组件也不会再次呈现。安装后，它将仅渲染一次。

如何在启动时只渲染一次React组件？

2 个答案: