[英]How to prevent React from re-rendering the whole component
I have a prop called isMobile
that displays an external iframe.我有一个名为
isMobile
的道具,它显示一个外部 iframe。 When I tilt the screen on an iPad, this will change the prop to change values and re-render the iframe (losing all progress inside the iframe).当我在 iPad 上倾斜屏幕时,这将更改道具以更改值并重新渲染 iframe(丢失 iframe 内的所有进度)。
What is a good way of preventing that re-render?防止重新渲染的好方法是什么? The docs say that I shouldn't use
shouldComponentUpdate
, since that only is a performance optimization. 文档说我不应该使用
shouldComponentUpdate
,因为那只是性能优化。
As some answers said, you can use a React.PureComponent
that it avoid to re-render with any reason to do it, so you can fix it, separating your Iframe
into a single component with the React.PureComponent
so it would be like this:正如一些答案所说,您可以使用
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>
);
}
}
So the MyPureIframe
only will change (re-render) when some of its props change (src, width, height, or other that you passed down).所以
MyPureIframe
只有在它的一些道具改变(src、宽度、高度或你传递的其他MyPureIframe
)时才会改变(重新渲染)。
In that way no matters in the MyNormalView
re-render the deep component MyPureIframe
won't re-render until any of its props changed.通过这种方式,
MyNormalView
任何问题都不会重新渲染深层组件MyPureIframe
直到其任何道具发生更改时才会重新渲染。
I hope it can help you.我希望它能帮助你。
Because the answer above is related for class based component, if you use a functional component, it mean a function that render some html markup, you can still use this approach as follow.因为上面的答案与基于类的组件有关,如果您使用功能组件,它意味着呈现一些 html 标记的函数,您仍然可以使用这种方法如下。
import React, {memo} from 'react';
const MyPureIframe = memo(({src, width, height}) => (
<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>
);
}
}
Doing like so, you will get the same result, but using a functional component instead.这样做,您将获得相同的结果,但使用功能组件代替。
Hope it helps you.希望对你有帮助。
shouldComponentUpdate is not a better approach. shouldComponentUpdate 不是更好的方法。 The document says it can ignore the changes to shouldComponentUpdate in future.
该文档说它可以在将来忽略对 shouldComponentUpdate 的更改。 Please try using the concept called
memoize
which is better than PureComponent请尝试使用比 PureComponent 更好的
memoize
概念
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.