来源于resize-observer-polyfill

1.浏览器resizeObserver兼容性存在问题

如果没有原生的ResizeObserver方法 将使用垫片提供的方法

  1. export default (() => {
  2.     // Export existing implementation if available.
  3.   // 启用原生api
  4.     if (typeof global.ResizeObserver !== 'undefined') {
  5.         return global.ResizeObserver;
  6.     }
  7.         // 启用垫片api
  8.     return ResizeObserverPolyfill;
  9. })();

2.监听的属性变化和刷新

在树形变化后调用响应的对象 和mobx，formily类似的一套实现

  1. // 会影响size的有  onResize只在window生效
  2. window.addEventListener('resize', this.refresh);
  4. // 普通元素怎么处理 拖拽完成形变的时候触发trannsitionend事件
  5. document.addEventListener('transitionend', this.onTransitionEnd_);
  7. // transition的形变可能影响到的属性
  8. const transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
  10. // 记录和计算前后属性变化 如果变化 触发sizeChange通知
  11. function getHTMLElementContentRect(target) {
  12.     const {clientWidth, clientHeight} = target;
  13.     if (!clientWidth && !clientHeight) {
  14.         return emptyRect;
  15.     }
  16.     const styles = getWindowOf(target).getComputedStyle(target);
  17.     const paddings = getPaddings(styles);
  18.     const horizPad = paddings.left + paddings.right;
  19.     const vertPad = paddings.top + paddings.bottom;
  20.     let width = toFloat(styles.width),
  21.         height = toFloat(styles.height);
  22.     // model is applied (except for IE).
  23.     if (styles.boxSizing === 'border-box') {
  24.         if (Math.round(width + horizPad) !== clientWidth) {
  25.             width -= getBordersSize(styles, 'left', 'right') + horizPad;
  26.         }
  27.         if (Math.round(height + vertPad) !== clientHeight) {
  28.             height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
  29.         }
  30.     }
  31.     if (!isDocumentElement(target)) {
  32.         const vertScrollbar = Math.round(width + horizPad) - clientWidth;
  33.         const horizScrollbar = Math.round(height + vertPad) - clientHeight;
  34.         if (Math.abs(vertScrollbar) !== 1) {
  35.             width -= vertScrollbar;
  36.         }
  37.         if (Math.abs(horizScrollbar) !== 1) {
  38.             height -= horizScrollbar;
  39.         }
  40.     }
  41.     return createRectInit(paddings.left, paddings.top, width, height);
  42. }

3.react-component层面组装

  1. // 用useRef不变特性保存各阶段size数据
  2.   const sizeRef = React.useRef({
  3.     width: -1,
  4.     height: -1,
  5.     offsetWidth: -1,
  6.     offsetHeight: -1,
  7.   });
  8. <SingleObserver {...props} key={key}>
  9.         {child}
  10.       </SingleObserver>
  12. // 第一顺位获取children的ref做被监听对象的dom
  13.   const elementRef = React.useRef<Element>(null);
  14.     ...
  15.   const mergedChildren = isRenderProps ? children(elementRef) : children;
  17. // 备选通过当前reactNode的挂载找到上层dom
  18. ReactDom.findDOMNode(node)
  19. const currentElement: HTMLElement =
  20.       findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current);
  22. // 通过两层dom处理的意思是  原始组件最好自带一个wapper包裹要onResize处理的部分
  23. // 否则往顶层冒泡拿一个wapper 不一定符合
  25. // 启用监听
  26.   React.useEffect(() => {
  27.     const currentElement: HTMLElement =
  28.       findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current);
  30.     if (currentElement && !disabled) {
  31.       // 开启监听 回调为onInternalResize
  32.       observe(currentElement, onInternalResize);
  33.     }
  35.     return () => unobserve(currentElement, onInternalResize);
  36.   }, [elementRef.current, disabled]);
  38. // onInternalResize
  39. onCollectionResize?.(sizeInfo, target, data);
  40. // defer the callback but not defer to next frame
  41. // 顺延一个frame刷新时间处理 微任务 frame开启后会查询
  42. Promise.resolve().then(() => {
  43.   onResize(sizeInfo, target);
  44. });