From 3d17d5f26e5070db9d13c3cab14a8c9e8bb48758 Mon Sep 17 00:00:00 2001 From: undefined Date: Thu, 27 Aug 2020 22:38:56 +0800 Subject: [PATCH] perf: update lazyload --- components/table/filterDropdown.jsx | 53 ---------- components/table/interface.js | 1 - components/transfer/ListItem.jsx | 6 +- components/vc-lazy-load/src/LazyLoad.jsx | 20 ++-- examples/App.vue | 120 +---------------------- 5 files changed, 13 insertions(+), 187 deletions(-) diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx index 4d98921a9..d201cf4eb 100755 --- a/components/table/filterDropdown.jsx +++ b/components/table/filterDropdown.jsx @@ -53,59 +53,6 @@ export default { ); return state; }, - // data() { - // this.neverShown = false; - // const visible = - // 'filterDropdownVisible' in this.column ? this.column.filterDropdownVisible : false; - // this.preProps = { ...getOptionProps(this) }; - // return { - // sSelectedKeys: this.selectedKeys, - // sKeyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单 - // sVisible: visible, - // sValueKeys: generateValueMaps(this.column.filters), - // }; - // }, - watch: { - // _propsSymbol: syncWatch(function() { - // const nextProps = getOptionProps(this); - // const { column } = nextProps; - // const newState = {}; - // /** - // * if the state is visible the component should ignore updates on selectedKeys prop to avoid - // * that the user selection is lost - // * this happens frequently when a table is connected on some sort of realtime data - // * Fixes https://github.com/ant-design/ant-design/issues/10289 and - // * https://github.com/ant-design/ant-design/issues/10209 - // */ - // if ( - // 'selectedKeys' in nextProps && - // !shallowequal(this.preProps.selectedKeys, nextProps.selectedKeys) - // ) { - // newState.sSelectedKeys = nextProps.selectedKeys; - // } - // if (!shallowequal((this.preProps.column || {}).filters, (nextProps.column || {}).filters)) { - // newState.sValueKeys = generateValueMaps(nextProps.column.filters); - // } - // if ('filterDropdownVisible' in column) { - // newState.sVisible = column.filterDropdownVisible; - // } - // if (Object.keys(newState).length > 0) { - // this.setState(newState); - // } - // this.preProps = { ...nextProps }; - // }), - // 'column.fixed': function (val) { - // this.setNeverShown(this.column) - // }, - // column (val) { - // if ('filterDropdownVisible' in val) { - // this.sVisible = val.filterDropdownVisible - // } - // }, - // selectedKeys (val) { - // this.sSelectedKeys = val - // }, - }, mounted() { const { column } = this; diff --git a/components/table/interface.js b/components/table/interface.js index f41294466..a58c2132a 100644 --- a/components/table/interface.js +++ b/components/table/interface.js @@ -195,7 +195,6 @@ export const SelectionBoxProps = { // } export const FilterMenuProps = { - _propsSymbol: PropTypes.any, locale: TableLocale, selectedKeys: PropTypes.arrayOf([PropTypes.string, PropTypes.number]), column: PropTypes.object, diff --git a/components/transfer/ListItem.jsx b/components/transfer/ListItem.jsx index 4627197db..5f55923ae 100644 --- a/components/transfer/ListItem.jsx +++ b/components/transfer/ListItem.jsx @@ -56,11 +56,7 @@ export default { debounce: false, ...lazy, }; - children = ( - - {listItem} - - ); + children = {listItem}; } else { children = listItem; } diff --git a/components/vc-lazy-load/src/LazyLoad.jsx b/components/vc-lazy-load/src/LazyLoad.jsx index 987c6ea0b..8542e6bb7 100644 --- a/components/vc-lazy-load/src/LazyLoad.jsx +++ b/components/vc-lazy-load/src/LazyLoad.jsx @@ -7,6 +7,7 @@ import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; import parentScroll from './utils/parentScroll'; import inViewport from './utils/inViewport'; +import { watchEffect } from 'vue'; const lazyLoadProps = { debounce: PropTypes.bool, @@ -22,7 +23,6 @@ const lazyLoadProps = { threshold: PropTypes.number, throttle: PropTypes.number, width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - _propsSymbol: PropTypes.any, }; export default { @@ -53,20 +53,15 @@ export default { visible: false, }; }, - watch: { - _propsSymbol() { - if (!this.visible) { - this.lazyLoadHandler(); - } - }, - }, mounted() { this.$nextTick(() => { - this._mounted = true; + watchEffect(() => { + if (!this.visible) { + this.lazyLoadHandler(this.$props); + } + }); const eventNode = this.getEventNode(); - this.lazyLoadHandler(); - if (this.lazyLoadHandler.flush) { this.lazyLoadHandler.flush(); } @@ -75,7 +70,6 @@ export default { }); }, beforeUnmount() { - this._mounted = false; if (this.lazyLoadHandler.cancel) { this.lazyLoadHandler.cancel(); } @@ -110,7 +104,7 @@ export default { }; }, lazyLoadHandler() { - if (!this._mounted) { + if (!this._.isMounted) { return; } const offset = this.getOffset(); diff --git a/examples/App.vue b/examples/App.vue index d649b1641..b67493837 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -11,125 +11,15 @@ Use Drawer to quickly preview details of an object, such as those in a list. ```vue