发表机构
Athens University of Economics and Business; University of Ioannina（雅典经济与商业大学; 约阿尼纳大学）
机构由 AI 辅助整理，请以论文原文为准。AI 中文总结
本研究提出静态分析方法和自动化重构策略（基于Context API和组件组合），识别并消除React中的Prop Drilling，实证评估显示76.3%的实例可自动消除。
AI 中文摘要
在React前端开发中，Prop Drilling是指通过组件属性在组件层级的多层之间传播数据的实践。尽管React文档不鼓励这种做法，且近期研究将其定性为代码异味，但对其普遍性、复杂性和自动化重构潜力知之甚少。在本工作中，我们提出了一种静态分析方法，用于识别React代码库中的Prop Drilling实例，并基于Context API和组件组合两种自动化重构策略消除它们。所提出的方法已实现为名为ReactRefactor的this http URL命令行工具，并在开源React应用的基准数据集上进行了实证评估。实证评估的主要发现表明：(a) Prop Drilling在基准项目中频繁出现，与项目规模无关；(b) 其数据传播深度通常为低到中等复杂度，但更普遍的复杂性源于沿同一路径同时转发多个属性；(c) 大量（76.3%）的Prop Drilling实例可通过自动化消除，主要通过重构为Context API实现。
英文摘要
In React front-end development, Prop Drilling is the practice of propagating data through component properties across multiple levels of the component hierarchy. Despite being discouraged by React documentation and characterized as a code smell by recent research, little is known about its prevalence, complexity, and potential for automated refactoring. In this work, we propose a static analysis method for identifying Prop Drilling instances in a React codebase and eliminating them using two automated refactoring strategies based on Context API and Component Composition. The proposed method is implemented as a Node.js command line tool, ReactRefactor, and empirically evaluated on a benchmark dataset of open-source React applications. The main findings of the empirical evaluation indicate (a) the frequent occurrence of prop drillings across benchmark projects, irrespective of project size; (b) their generally low to moderate complexity in terms of data propagation depth, contrasted with the more prevalent complexity arising from the simultaneous forwarding of multiple properties along the same path; and, (c) the potential for automated elimination of a substantial share (76.3%) of prop drillings, primarily through refactoring to the Context API.
CommentsSubmitted to Journal of Systems and Software
