提交 589140a3 authored 作者: vipcxj's avatar vipcxj

fix: 由于size无限render

上级 b00dd7f9
......@@ -17276,9 +17276,9 @@
}
},
"react-async-wrapper": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/react-async-wrapper/-/react-async-wrapper-1.0.1.tgz",
"integrity": "sha512-J0V/I/BH38fEo6+ofYNhEP4eL6S1jLbR5dNabhGQU8I/313VQ2CMVRUT2w786QeYL4qUGWv+2cM3fx+k8H/tPw==",
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/react-async-wrapper/-/react-async-wrapper-1.0.4.tgz",
"integrity": "sha512-gHY931fE8/8Oqj6mzN6NhGUcJuJ5noYTtXhieZY/NQtKBhD7EAEMl75lZDEKqsoBx+q7Yqhu3qwEJdQBG1yvvw==",
"requires": {
"hoist-non-react-statics": "^2.5.0",
"is-promise": "^2.1.0"
......@@ -17527,13 +17527,13 @@
}
},
"react-router-4-compat": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/react-router-4-compat/-/react-router-4-compat-1.0.4.tgz",
"integrity": "sha512-Xy3yEOENY3NH49F2vVPkO5moYP4W0NJq01Ruz48GBe3VMUCASrkda5J8dJ97ETui4ffE6+xv4YHu5x91/ypB8A==",
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/react-router-4-compat/-/react-router-4-compat-1.0.6.tgz",
"integrity": "sha512-i9khihVAGtFRihGCfjUGH5f/9546s0M6igYKdsM4hf3kPgXjEPhimWZPtT4bWxUTLqkguz9Vi2G1Natv0lLqwA==",
"requires": {
"hoist-non-react-statics": "^2.5.0",
"invariant": "^2.2.4",
"react-async-wrapper": "^1.0.1"
"react-async-wrapper": "^1.0.2"
}
},
"react-router-dom": {
......
......@@ -35,11 +35,11 @@
"moment": "^2.22.1",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-async-wrapper": "^1.0.1",
"react-async-wrapper": "^1.0.4",
"react-dom": "^16.3.2",
"react-json-view": "^1.16.1",
"react-markdown": "^3.3.0",
"react-router-4-compat": "^1.0.4",
"react-router-4-compat": "^1.0.6",
"react-sizeme": "2.4.1",
"resolve-pathname": "^2.2.0",
"uuid": "^3.2.1",
......
import React from 'react';
import PropTypes from 'prop-types';
import sm from 'react-sizeme';
import hoistStatics from 'hoist-non-react-statics';
import { shallowEqual } from '../../utils/helper';
const SizeMeContext = React.createContext('sizeMe');
export const { Provider, Consumer } = SizeMeContext;
......@@ -26,10 +28,30 @@ export const provideSize = options => (Component) => {
export const provideWidth = provideSize({});
export const provideHeight = provideSize({ monitorHeight: true });
class CheckSize extends React.Component {
shouldComponentUpdate(nextProps, nextState, nextContext) {
return !shallowEqual(this.props.size, nextProps.size)
|| !shallowEqual(this.props, nextProps, ['size', 'children'])
|| !shallowEqual(this.state, nextState)
|| !shallowEqual(this.context, nextContext);
}
render() {
return this.props.children || null;
}
}
CheckSize.propTypes = {
size: PropTypes.object,
};
export const withSize = (Component) => {
const C = React.forwardRef((props, ref) => (
<Consumer>
{ size => <Component {...props} size={size} ref={ref} />}
{ size => (
<CheckSize {...props} size={size} fordwardedRef={ref}>
<Component {...props} size={size} ref={ref} />
</CheckSize>
)}
</Consumer>
));
C.displayName = `withSize(${Component.displayName || Component.name})`;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论