如何在React 17中检测渲染后组件的外部边距？

我负责的代码库包含数千个React组件，其中部分组件是在推行外部边距等设计规范之前编写的，现在需要对此进行清理。

检测外部边距的思路比较清晰：每次组件渲染后，找到其根DOM元素，对比它们的边框盒（border boxes）与外盒（outer boxes）的并集，若存在差异则记录诊断信息。（我知道这可能会非常慢，仅在调试构建中通过运行时标志启用。）

核心疑问1：如何在每个组件渲染元素重排后执行检测代码？ #

约束条件如下：

• 当前使用React 17版本（即将升级）
• 我们使用类组件，偶尔使用函数组件，通过Redux连接；禁止使用React Hooks、JSX/TSX
• 禁止扩展Component基类，因为部分组件已实现componentDidMount等生命周期方法

理想情况下，能按需内省当前已挂载的组件树，但我尚未找到可行方法。

核心疑问2：是否已有现成方案（如插件）可识别带有外部边距的渲染组件？ #

一、渲染后执行检测代码的实现方式 #

1. 利用React 17全局更新回调

React 17提供了ReactDOM.unstable_runAfterUpdates方法，可在DOM更新完成后执行回调。仅在调试环境启用，遍历页面所有React根元素及下属组件节点：

// 仅调试环境启用，通过全局标志控制
if (process.env.NODE_ENV === 'development' && window.__ENABLE_MARGIN_CHECK__) {
  // 单个节点的边距检测逻辑
  const checkMarginForNode = (domNode) => {
    const borderBox = domNode.getBoundingClientRect();
    const style = window.getComputedStyle(domNode);
    const marginTop = parseFloat(style.marginTop);
    const marginRight = parseFloat(style.marginRight);
    const marginBottom = parseFloat(style.marginBottom);
    const marginLeft = parseFloat(style.marginLeft);
    
    // 若存在非零外部边距则输出警告
    if (marginTop !== 0 || marginRight !== 0 || marginBottom !== 0 || marginLeft !== 0) {
      console.warn(`组件根节点存在外部边距`, domNode, {
        borderBox,
        margins: { marginTop, marginRight, marginBottom, marginLeft }
      });
    }
  };

  // 遍历所有React组件根节点
  const checkAllComponents = () => {
    const reactRoots = document.querySelectorAll('[data-reactroot]');
    reactRoots.forEach(root => {
      const traverseNodes = (node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          // 通过React内部属性标记判断是否为组件根节点
          const isComponentRoot = Object.keys(node).some(key => key.startsWith('__reactInternalInstance$'));
          if (isComponentRoot) {
            checkMarginForNode(node);
          }
          Array.from(node.children).forEach(traverseNodes);
        }
      };
      traverseNodes(root);
    });
  };

  // 每次DOM更新后执行检测
  ReactDOM.unstable_runAfterUpdates(checkAllComponents);
}

注：unstable_runAfterUpdates为不稳定API，但在React 17调试环境可安全使用，升级到React 18后可替换为ReactDOM.flushSync配合回调。

2. Redux中间件拦截更新

针对Redux连接的组件，可在中间件中于action处理完成、DOM重排后触发检测：

const marginCheckMiddleware = store => next => action => {
  const result = next(action);
  if (process.env.NODE_ENV === 'development' && window.__ENABLE_MARGIN_CHECK__) {
    // 用requestAnimationFrame确保DOM已完成重排
    requestAnimationFrame(checkAllComponents); // 复用上面的checkAllComponents函数
  }
  return result;
};

此方式覆盖Redux action触发的更新，结合unstable_runAfterUpdates可覆盖所有组件更新场景。

二、现成方案推荐 #

1. 自定义ESLint规则

无需运行时检测，直接在代码层面扫描。针对用React.createElement编写的组件，检查其style属性是否包含margin相关配置：

// 简化版自定义ESLint规则
module.exports = {
  rules: {
    'no-component-root-margin': {
      create(context) {
        return {
          CallExpression(node) {
            // 匹配React.createElement调用
            if (node.callee.name === 'createElement' && node.arguments.length >= 3) {
              const styleArg = node.arguments[2];
              // 检查style对象是否包含margin属性
              if (styleArg.type === 'ObjectExpression') {
                const hasMarginProp = styleArg.properties.some(prop => 
                  prop.key.name.startsWith('margin')
                );
                if (hasMarginProp) {
                  context.report({
                    node,
                    message: '组件根元素不应设置外部边距'
                  });
                }
              }
            }
          }
        };
      }
    }
  }
};

2. 浏览器DevTools脚本

在Chrome DevTools中保存自定义脚本，按需扫描当前页面的组件节点：

// DevTools Snippet示例
const checkComponentsWithMargin = () => {
  document.querySelectorAll('*').forEach(el => {
    // 判断是否为React组件根节点
    if (Object.keys(el).some(k => k.startsWith('__reactInternalInstance$'))) {
      const style = getComputedStyle(el);
      const margins = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'].map(prop => parseFloat(style[prop]));
      if (margins.some(m => m !== 0)) {
        console.log('存在外部边距的组件节点:', el, margins);
        el.style.outline = '2px solid red'; // 高亮标记节点
      }
    }
  });
};
checkComponentsWithMargin();

内容的提问来源于stack exchange，提问作者Alex Davidson