本文共 3795 字,大约阅读时间需要 12 分钟。
React.memo
gives us the ability of pure components in React but for functional based components rather than class based ones.
React.memo
使我们能够在React中使用纯组件,但可以使用基于功能的组件,而不是基于类的组件。
memoization
is computer science jargon which means caching the result of expensive function calls and returning the cached version when the arguments are the same.
memoization
是计算机科学的行话,这意味着缓存昂贵的函数调用的结果,并在参数相同时返回缓存的版本。
In React terms:
用React术语:
We don’t want MyNewComponent
re-rendering when the props
being passed are the same.
当传递的props
相同时,我们不希望MyNewComponent
重新渲染。
I’ve created the .
我创建了 。
It’s a simple app that counts the number of times a button is clicked. You can see from the below screenshot we have a banner on top of the page.
这是一个简单的应用程序,可以计算按钮被点击的次数。 您可以从下面的屏幕截图中看到,页面顶部有一个横幅。
Imagine the Banner
is a UI component that can have different types, in this case you want to use the info
type banner so you create your Banner
as follows:
想象一下, Banner
是一个可以具有不同类型的UI组件,在这种情况下,您要使用info
类型横幅广告,因此您可以如下创建Banner
:
Our CounterComponent
looks like this:
我们的CounterComponent
看起来像这样:
class CounterComponent extends Component { state = { buttonPressedCount: 0 }; render() { const { buttonPressedCount } = this.state; return (); }}Button Pressed Count: {buttonPressedCount}
And our Banner
component looks as follows:
我们的Banner
组件如下所示:
const Banner = props => { const { type } = props; if (type === "info") { returnI am an info banner; }};
In our CounterComponent
, every time we click the button we increase the buttonPressedCount
variable which causes a re-render which is what you would expect. The problem with this is that the Banner
component also re-renders even though the props
being passed to it haven’t changed.
在CounterComponent
,每次单击按钮时,都会增加buttonPressedCount
变量,这将导致重新呈现您期望的值。 这样做的问题是,即使传递给它的props
没有改变, Banner
组件也会重新渲染。
To circumvent this, we use memo
which acts like PureComponent
in the fact that it will stop re-renders when the props
haven’t changed. Our code updated looks like:
为了避免这种情况,我们使用memo
,它的作用类似于PureComponent
,因为当props
没有变化时,它将停止重新渲染。 我们更新的代码如下所示:
const Banner = memo(props => { const { type } = props; if (type === "info") { returnI am an info banner; }});
Now our Banner
component will only re-render when the props
to it have changed.
现在,我们的Banner
组件仅在其props
更改时才会重新渲染。
This is core fundamental idea of React memo.
这是React备忘录的核心基本思想。
Ok so let’s get a little more advanced and talk about custom equality. By default, memo
only does a shallow
comparison of props and prop’s objects. You can pass a second argument to indicate a custom equality check:
好吧,让我们更进一步,讨论自定义相等性。 默认情况下, memo
仅对道具和道具的对象进行shallow
比较。 您可以传递第二个参数来指示自定义相等性检查:
React.memo(Component, [areEqual(prevProps, nextProps)]);
This is similar to shouldComponentUpdate
but the inverse i.e. returning true
in shouldComponentUpdate
causes another render whereas areEqual
is the opposite.
这类似于shouldComponentUpdate
但是相反,即在shouldComponentUpdate
返回true
会导致另一个渲染,而areEqual
相反。
Imagine we had a Person
component that accepted a prop
person which is an object, we could check if the name
is the same.
想象一下,我们有一个Person
组件,它接受了作为对象的prop
person,我们可以检查name
是否相同。
const areEqual = (prevProps, nextProps) => { return (prevProps.name === nextProps.name)};React.memo(Person, areEqual);
This is a really nice addition to React, allowing us to use functional components without having the worry about needless re-renders. As always, I hope you learned something good with this post!
这是对React的一个非常好的补充,它使我们能够使用功能组件,而不必担心不必要的重新渲染。 与往常一样,我希望您从这篇文章中学到了好东西!
翻译自:
转载地址:http://mjhgb.baihongyu.com/