Question

我正在尝试采用$(window).scroll(function () { $('.animation-test').each(function () { var imagePos = $(this).offset().top; var imageHeight = $(this).height(); var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) { $(this).addClass("slice-right"); } else { $(this).removeClass("slice-right"); } }); });，一种方法是使用PureRenderMixin。

但我正试图远离javascript shallowEqual（ https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html）

我也在使用redux，而redux的mixins已经提供了纯渲染功能。（这意味着redux connect是提供纯渲染的HOC）

所以我可以只连接需要纯渲染的组件，但我也阅读了哑/智能组件之间的区别，并且不愿意connect每个组件。

我应该使用connect吗？或者有更好的方法吗？

Answer 1

使用React.PureComponent。

import React from 'react';

class MyComponent extends React.PureComponent {
    render() {
       ...
    }
}

（React Top-Level API）

或者，您可以使用旧版shallow-compare addon，但需要在每个组件中实施shouldComponentUpdate。

您应该将代码迁移到ES6类，不推荐使用createClass。

Answer 2

使用PureRenderMixin的声明方式是使用reactJs类顶部的@PureRender属性，如帖子here中所示：

@PureRender
export default class UiWidget extends Component {
}

反应PureRenderMixin的替代方案？

2 个答案: