由于useLayoutEffect
钩子是在dom获得后、渲染组件前。因此,如果在useLayoutEffect
中设置一些长耗时的,或者死循环之类的任务,会导致内存堆栈溢出。这时候需要转用useEffect
。
// 适配全局宽度拉动变化时,legend显示数量React.useEffect(() => {const onResize = debounce(() => {let totalWidth = 0;const els = itemWrapRef.current;const spaceEl = spaceWrapRef.current;const { length } = options;let maxNum: number = length;let _noFullOpts = [...options];let isShow = false;els.forEach((el: any, index: number) => {// 累计宽度是否大于容器宽度,为了计算最大容个数if (el?.offsetWidth && spaceEl?.clientWidth) {const flag = totalWidth + el?.offsetWidth > spaceEl?.clientWidth;// console.log('width===>', spaceEl.clientWidth, totalWidth, flag);if (!flag) {maxNum = index + 1;totalWidth += el?.offsetWidth;isShow = false;} else {isShow = true;}if (length > 1) {_noFullOpts = options.slice(0, maxNum);}}});setIsShowMore(isShow);setNoFullOpts([..._noFullOpts]);}, 50);onResize();window.addEventListener('resize', onResize);return () => {window.removeEventListener('resize', onResize);};}, [options]);