什么是reactJs组件的@PureRender属性 [英] What is @PureRender attribute for a reactJs component

问题描述

我正在研究我正在处理的代码库中组件的定义：

I cam across the definition of a component in the code base I'm working upon:

@PureRender
export default class UiWidget extends Component {
}

我试着谷歌搜索了解其重要性属性 @PureRender 已用于装饰组件但未获得任何相关链接。有人可以帮我理解在reactJs组件上应用这个属性的影响吗？

I tried googling to understand the significance of the attribute @PureRender which has been used to decorate the component but didn't get any relevant link. Can someone help me understand the impact of applying this attribute on a reactJs component?

推荐答案

有三种方法来定义反应组件：

There are three ways to define a react component:

1. 不扩展任何类的功能无状态组件


2. 扩展<$的组件c $ c> PureComponent class


3. 扩展的普通组件组件类

1. Functional stateless component which doesn't extend any class
2. A component that extends PureComponent class
3. A normal component that extends Component class

对于需要易于重复使用的简单，仅呈现的组件，首选无状态功能组件。

For simple, presentation-only components that need to be easily reused, stateless functional components are preferred.

PureComponent 为您覆盖 shouldComponentUpdate 并重新仅在道具或状态实际更改时才呈现组件。这里重点是它只对nextProps和nextState进行浅比较。您可以阅读更多此处和here 。 @PureRender 只是声明我的reactJs组件继承自预定义的 PureComponent reactJs组件的声明方式。

PureComponent overrides the shouldComponentUpdate for you and re-renders the component only if the props or state have actually changed. The important point here is it only does a shallow comparison of nextProps and nextState. You can read more here and here. @PureRender is simply the declarative way of saying that my reactJs component inherits from predefined PureComponent reactJs component.

扩展组件类有助于实现自己的 shouldComponentUpdate 如果你需要一些通过在下一个/当前道具和状态之间执行自定义比较逻辑来提高性能。

Extending Component class helps to implement your own shouldComponentUpdate if you need some performance gains by performing you custom comparison logic between next/current props and state.

这篇关于什么是reactJs组件的@PureRender属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！