minor, fix scroll unlimited loop with PureComponent

Author: Emiya0306

libs/index.js

@@ -6,6 +6,7 @@
 export { default as CollapseTransition } from './collapse';
 export { default as Transition } from './transition';
 export { default as Component } from './component';
+export { default as PureComponent } from './pureComponent';
 export { default as PropTypes } from './props';
 export { default as View } from './view';
 export { default as Animate } from './animate';

libs/pureComponent/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class PureComponent extends React.PureComponent {
+  classNames(...args) {
+    return classnames(args);
+  }
+
+  className(...args) {
+    const { className } = this.props;
+    return this.classNames.apply(this, args.concat([className]));
+  }
+
+  style(args) {
+    const { style } = this.props;
+    return Object.assign({}, args, style)
+  }
+}
+
+PureComponent.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object
+};

src/scrollbar/Scrollbar.jsx

@@ -2,13 +2,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom'
 
-import { PropTypes, Component } from '../../libs';
+import { PropTypes, PureComponent } from '../../libs';
 import { addResizeListener, removeResizeListener } from '../../libs/utils/resize-event';
 
 import { getScrollBarWidth } from './scrollbar-width';
 import { Bar } from './Bar'
 
-export class Scrollbar extends Component {
+export class Scrollbar extends PureComponent {
   constructor(props) {
     super(props);
 
@@ -61,7 +61,7 @@ export class Scrollbar extends Component {
 
   _update() {
     let heightPercentage, widthPercentage;
-    const wrap = this.wrap;
+    const { wrap, state } = this;
     if (!wrap) return;
 
     heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
@@ -70,7 +70,9 @@ export class Scrollbar extends Component {
     let sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
     let sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
 
-    this.setState({sizeHeight, sizeWidth})
+    if (state.sizeHeight !== sizeHeight || state.sizeWidth !== sizeWidth) {
+      this.setState({sizeHeight, sizeWidth})
+    }
   }
 
   render() {