reactJs 组件的@PureRender 属性是什么答案

【问题标题】：What is @PureRender attribute for a reactJs componentreactJs 组件的@PureRender 属性是什么
【发布时间】：2017-09-29 19:11:41
【问题描述】：

我在我正在处理的代码库中发现了一个组件的定义：

@PureRender
export default class UiWidget extends Component {
}

我尝试谷歌搜索以了解属性@PureRender 的重要性，该属性已用于装饰组件但没有获得任何相关链接。有人可以帮助我了解在 reactJs 组件上应用此属性的影响吗？

【问题讨论】：

我认为它与 JS 纯函数有关：给定相同的道具和状态，渲染函数将产生相同的结果。

标签： javascript reactjs

【解决方案1】：

React 组件的定义有以下三种方式：

不扩展任何类的功能性无状态组件
扩展PureComponent类的组件
扩展Component类的普通组件

对于需要轻松重用的简单、仅演示组件，首选无状态功能组件。

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

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

【讨论】：

因此，用@PureRender 属性装饰自定义组件（继承自Component）和继承自reactJs 库中定义的PureComponent 的组件是一回事。是吗？您能否在您的帖子中分享一些有关@PureRender 属性的详细信息，这是我的主要问题。
是的。这是一回事。你可以在这里看一个例子github.com/brigand/react-purerender

【解决方案2】：

这是一个 javascript decorator，最初是在 ES2016 (ES7) 中提出的。我相信它们已从提案中删除并被推迟。

装饰器的目的是添加shouldComponentUpdate的实现与浅层属性比较。

如今，使用PureComponent 的扩展名也是如此：

export default class UiWidget extends React.PureComponent

我相信装饰器不是React 的一部分，因此它可能在您的项目中的某个地方或依赖项中实现，类似于 pure-render-decorator.

过去，React 使用 pure-render-mixin 实现了该功能，但是 mixins 不能与 ES6 类一起使用（仅与 React.createClass 一起使用），因此引入了替代解决方案。装饰师就是其中之一。

【讨论】：