Question

我有一个名为isMobile的道具，可以显示外部iframe。当我在iPad上倾斜屏幕时，这将更改道具以更改值并重新渲染iframe（丢失iframe内部的所有进度）。

防止重新渲染的好方法是什么？ docs说我不应该使用shouldComponentUpdate，因为那只是性能优化。

Answer 1

正如一些答案所说，您可以使用React.PureComponent来避免由于任何原因而重新渲染它，因此您可以对其进行修复，将Iframe分成一个单独的组件， React.PureComponent就是这样：

class MyPureIframe extends React.PureComponent {
  render() {
    const {src, width, height} = this.props;
    return (
      <iframe src={src} width={width} height={height} {...whateverProps} />
    );
  }
}

class MyNormalView extends React.Component {
  render() {
    return (
      <div>
       <!--SOME MARKUP HERE-->
       <MyPureIframe src={'https://your-url-to-iframe'} width={100} height={100} />
       <!--SOME MARKUP HERE-->
      </div>
    );
  }
}

因此，MyPureIframe仅在其某些道具改变（src，宽度，高度或其他您传递的道具）时才会改变（重新渲染）。

通过这种方式，MyNormalView中的任何东西都不会重新渲染，深层组件MyPureIframe直到其任何道具更改后都不会重新渲染。

希望它能对您有所帮助。

Answer 2

shouldComponentUpdate不是更好的方法。该文件说，将来可以忽略对shouldComponentUpdate的更改。请尝试使用名为memoize的概念，该概念比PureComponent更好

如何防止React重新渲染整个组件

2 个答案: