效率翻倍神器！如何用 ChatGPT 来维护开源项目？

站长

2024年04月07日 19:28 · 阅读数 4

引言

React Native ECharts 是一个用于显示 ECharts 图表的 React Native 库，我是这个开源项目的维护者。开源项目对软件开发生态系统至关重要，为开发者提供宝贵的资源和工具。然而，维护和改进这些项目可能具有挑战性，特别是当它们在规模和复杂性方面不断增长。

在本文中，我们将探讨 GPT，由 OpenAI 开发的强大语言模型，如何帮助我维护开源项目。我们将通过在 React Native ECharts 中集成 React Native Gesture Handler 这个案例，来检查 GPT 在回答问题、生成代码、编写文档等方面的能力。

我将在 GPT 表现的智能程度给出我的主观评分，满分为 10 分。

回答问题

评分：10 分

最初，在项目问题讨论中有关于使用 RNGH 替代 PanResponder 的讨论。之前 PanResponder 运行良好，此问题就被搁置了。像这样的开源项目中的问题，如果没有人记得它，可能会永远搁置。

如果让 GPT 来为我们回答问题，将是非常轻松有趣的事情。我将问题内容和所有评论粘贴到 ChatGPT 中，并询问它如何回答这个问题。我对它的回应印象非常深刻。它首先表示了对问题反馈的感谢，介绍并比较了 PanResponder 和 react-native-gesture-handler，并像一位经验丰富的开源项目作者一样提出了解决方案。在我看来唯一的问题，就是有点过于啰嗦了。

以下是它的回答：

感谢您的建议，我们非常重视开发者的反馈。我们会认真考虑您建议用 react-native-gesture-handler（RNGH）替换 React Native 内置的 PanResponder。首先，请允许我解释这两个库的优势。

PanResponder 是内置于 React Native 的手势处理库。它可以处理各种手势操作，并与 React Native 框架紧密集成。然而，PanResponder 的功能相对有限，对于一些复杂的手势操作可能不够充分。

另一方面，react-native-gesture-handler 是一个独立的手势处理库，具有更丰富的功能和更好的性能。它的优势包括：

更精确的手势识别和处理：RNGH 可以更准确地识别和处理各种手势，提高应用程序的交互性。
更好的性能：RNGH 的性能优于 PanResponder，特别是在处理大量手势操作时。
更好的跨平台兼容性：RNGH 支持更多平台，包括 iOS 和 Android。
更灵活的 API：RNGH 提供了更丰富的 API，允许开发者自定义手势处理逻辑。

鉴于这些优势，我们将认真考虑用 react-native-gesture-handler 替换 PanResponder。我们将评估现有代码以确定替换成本和潜在问题。此外，我们将考虑将 react-native-gesture-handler 作为一个选项提供，让开发者根据需要选择手势处理库。

请给我们一些时间来评估这个建议。同时，如果您对实现过程有任何建议或想法，请随时在这个问题上发表评论。我们将尽快回复并做出决定。再次感谢您的建议！

ChatGPT 在回答问题方面被证明是宝贵的资源，因为它可以快速回应并准确理解问题的背景。然而，为模型提供足够的背景信息以生成更准确的答案是至关重要的。

写代码

评分：6 分

接下来，我尝试让 ChatGPT 帮助编写代码。由于上下文大小的限制，我将任务简化为 2 个步骤：

将原本使用 PanResponder 实现的手势处理代码转换为由 react-native-gesture-handler 处理。
通过配置 props，允许用户选择使用 PanResponder 或 react-native-gesture-handler。React-native-gesture-handler 是一个可选依赖项，如果未安装，则降级为 PanResponder。

首先，我将使用 PanResponder 处理手势的完整代码发布到 ChatGPT，并要求将其转换为 react-native-gesture-handler 版本。

它很快给我提供了转换后的代码，解释了代码并给出了使用说明，看起来非常智能和迅速。我采用了代码的解释部分，如下：

在这个重写版本中，我们导入了 react-native-gesture-handler，并使用了 PanGestureHandler 和 PinchGestureHandler。我们创建了一个名为 GestureHandler 的组件，将手势处理器与相应的事件处理器关联起来。此组件接受一个 zrenderId 属性和一个 children 属性。children 可以是任何需要手势处理的 React 组件。

原始的 PanResponder 实例被替换为 PanGestureHandler，使用 onGestureEvent 和 onHandlerStateChange 事件来处理手势变化。对于缩放功能，我们引入了 PinchGestureHandler，并为其设置了一个 onPinchGestureEvent 事件处理器。这两个处理器分别负责处理拖动和缩放手势。

为了同时处理拖动和缩放手势，我们使用 simultaneousHandlers 属性，这样 PanGestureHandler 和 PinchGestureHandler 可以同时处理手势。

现在，要将手势处理应用到组件上，只需将 GestureHandler 组件包裹在该组件周围，并传递 zrenderId 即可。

在简单处理类型错误和小错误后，就能够正常运行了，这太酷了，令人震惊。如果是我自己写，可能需要一个小时！

然而，当我查看了 react-native-gesture-handler 的文档后，我发现：

PanGestureHandler 和 PinchGestureHandler 都即将被弃用的 API，我们正式建议使用新的手势 API。

当然，这是可以理解的，因为 ChatGPT 的知识库截止日期为 2021 年 9 月，那时情况跟现在不同。

我尝试让它使用新的手势 API 编写代码。不幸的是，在没有那部分知识的情况下，它开始猜测如何使用新的 API，而且并不正确。

在使用 ChatGPT 协助进行任何操作时，您需要保持一定程度的怀疑态度。 以下是一部分错误的代码：

// ...
import { PanGesture, PinchGesture } from 'react-native-gesture-handler';
// ...
export const GestureHandler = ({ zrenderId, children }) => {
  const panRef = useRef();
  const pinchRef = useRef();
  const onPanGestureEvent = useMemo(
    () => ({ nativeEvent }) => {
      dispatchEvent(zrenderId, ['mousemove'], nativeEvent, 'change');
    },
    [zrenderId]
  );

  const onPanStateChange = useMemo(
    () => ({ nativeEvent }) => {
      const { state } = nativeEvent;

      if (state === 'began') {
        dispatchEvent(zrenderId, ['mousedown', 'mousemove'], nativeEvent, 'start');
      } else if (state === 'end') {
        dispatchEvent(zrenderId, ['mouseup', 'click'], nativeEvent, 'end');
      }
    },
    [zrenderId]
  );

  // const onPinchGestureEvent = ...

  return (
    <PanGesture
      ref={panRef}
      simultaneousHandlers={pinchRef}
      onGestureEvent={onPanGestureEvent}
      onStateChange={onPanStateChange}
    >
      <PinchGesture
        ref={pinchRef}
        simultaneousHandlers={panRef}
        onGestureEvent={onPinchGestureEvent}
      >
        {children}
      </PinchGesture>
    </PanGesture>
  );
};

然后我向它提供了新手势 API 中 panGesture 和 pinchGesture 使用的演示和文档，并让它重新生成代码。经过几轮调整后，代码终于可用了。可以看出，它从未知知识中理解和学习的能力也很强大。

紧接着，我告诉它我希望 react-native-gesture-handler 成为可选安装的，并且 ChatGPT 表现得非常有用。

在进行了更详细的测试后，仍然存在一些问题，我还是请 ChatGPT 帮我解决它们。整个过程并不顺畅，但它仍然对我快速定位问题和提供编码建议有帮助。

例如，在我的测试中，我发现 panGesture 的 onStart 事件触发较晚。ChatGPT 告诉我，这可能是因为 react-native-gesture-handler 需要收集足够的手势信息来确定手势是否被识别。在这个过程中会有延迟。为了解决这个问题，我们可以尝试使用 onBegin 代替 onStart，因为 onBegin 在手势处理器开始接收触摸时就会触发。同时提供了相应的代码，以及可能存在的风险，对我非常有帮助。

总的来说，当你能够清晰地描述你的需求，比如将任务分解得很好并提供足够完整的背景知识时，ChatGPT 将是你的得力助手。

总结修改

评分：9 分

整个过程是通过对话完成的，所以我们可以很容易地总结出信息。以下是由 ChatGPT 提供的总结，经过少量修改后可以直接使用。

提交信息：

feat: 为可选使用 react-native-gesture-handler 添加支持

PR 描述：

本次 PR 在项目中增加了对 `react-native-gesture-handler` 的可选支持。用户现在可以通过指定 `useRNGH` 参数来选择使用 `react-native-gesture-handler` 处理手势。当 `react-native-gesture-handler` 未安装或 `useRNGH` 设置为 `false` 时，组件将优雅地回退到使用内置平移手势。

更改包括：

- 添加一个 `useRNGH` 参数，以控制是使用 `react-native-gesture-handler` 还是内置平移手势。
- 处理 `react-native-gesture-handler` 未安装的情况，并将内置平移手势作为回退选项。
- 使用新的配置选项更新示例代码。

此更新提高了组件的灵活性，允许用户根据特定用例选择最佳的手势处理选项。

与 ChatGPT 一起编写 PR 描述和提交信息是一种顺畅的体验。通过提供清晰的指示和输入，模型生成了简洁且信息丰富的内容，准确反映了项目中所做的更改。

生成文档

评分：9 分

您还可以使用 ChatGPT 生成使用文档，这也非常方便，这里不再详细说明。

编写博客文章

评分：7 分

作为流程的最后一步，我请 ChatGPT 帮我编写一篇记录整个经历的博客文章。这篇博客文章就是这次协作的成果，展示了如何使用 ChatGPT 草拟连贯且引人入胜的内容。

猜猜看这里有多少内容是由 ChatGPT 生成的。😄

结论

在整个开发过程中，我学到了几个关于使用 ChatGPT 进行软件开发的重要经验：

将任务拆分成更小的步骤可以显著提高效率。
ChatGPT 的知识库可能过时，因此提供相关信息对于获得准确的代码示例至关重要。
尽管 ChatGPT 在文本任务方面很有帮助，但在实际编码方面仍无法取代人类专业知识。
ChatGPT 就像一个高度智能的助手，在整个项目中提供宝贵的咨询和建议。

总之，像 ChatGPT 这样的 AI 语言模型在各种任务中具有巨大的潜力，从规划和编码到文档和内容创建。随着 AI 技术的不断发展，我们可以期待更强大、更多功能的工具，这将进一步简化软件开发流程并提高开发者的整体效率。

最后，如果您想在您的 React Native 应用程序中绘制酷炫的图表，请尝试我们的项目。

wuba.github.io/react-nativ…