如何优化React中多个重复WebView函数以提升代码效率？

你的这些函数核心差异只是WebView的uri参数，完全可以通过抽离通用逻辑来大幅减少重复代码，下面是两种实用方案：

方案1：封装可复用组件 #

把WebView封装成一个接收uri作为props的通用组件，后续所有类似的函数都基于它来实现：

// 通用WebView组件
export const CustomWebView = ({ uri }) => {
  return <WebView source={{ uri }} />;
};

// 原来的a、b、c可以简化成
export const a = () => <CustomWebView uri="youtube1.com" />;
export const b = () => <CustomWebView uri="youtube2.com" />;
export const c = () => <CustomWebView uri="youtube3.com" />;
// 剩下7个组件同理

这种方式的好处是：后续如果需要给WebView加统一的配置（比如添加style、onLoad回调），只需要修改CustomWebView这一处，所有依赖它的组件都会同步更新，避免了逐个修改的麻烦。

方案2：用工厂函数批量生成组件 #

如果你的10个组件只是单纯返回不同uri的WebView，还可以用工厂函数批量创建：

// 定义一个生成组件的工厂函数
const createWebView = (uri) => () => {
  return <WebView source={{ uri }} />;
};

// 批量生成并导出组件
export const a = createWebView("youtube1.com");
export const b = createWebView("youtube2.com");
export const c = createWebView("youtube3.com");
// ...剩下7个组件依次调用即可

如果你的uri是有规律的（比如从youtube1.com到youtube10.com），还能通过循环进一步简化：

const componentMap = {};
for (let i = 1; i <= 10; i++) {
  componentMap[`component${i}`] = () => <WebView source={{ uri: `youtube${i}.com` }} />;
}

// 按需导出或者统一导出
export const { component1, component2, component3, ...component10 } = componentMap;

这两种方案都能有效减少重复代码，提升后续的维护效率，避免手动复制粘贴带来的错误。

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