我用尽了洪荒之力，解开了ChatGPT 写前端代码的封印

介绍

ChapGPT 听起来好得令人难以置信，所以让我们让它为我们编写一些 JS 代码。我想看看它是否可以解决我作为前端开发人员每天所做的任务。

是驴子是马拉出来溜溜，我们还是直接进入主题一探究竟。

在 React 中构建弹出框组件

虽然这是可能的，但我们不要通过添加一些代码来开始这个实验。让我们简单地要求 ChatGPT 创建两个 React 组件，这两个组件将成为弹出窗的元素和一个切换其可见性的按钮，一开始我是这么问的：

单独创建一个只有按钮(button)的React函数组件的文件，其名字是 ModalOpen。然后再单独创建一个叫 Modal 的函数组件文件，有个 div 在 Modal 函数组件里。

结果把我没有提及到的功能，弹出事件也写出来了，实在令我震惊！

大家看完以上截图是不是震惊？但是我不想让他这样实现我还未说的功能，我修改了创建代码的指令，修改如下：

单独创建一个只有按钮(button)的React函数组件的文件，其名字是 ModalOpen。然后再单独创建一个叫 Modal 的函数组件文件，有个 div 在 Modal 函数组件里。暂时不要包含事件，只是组件样式而已。

这个简单的任务完成得很完美！请注意它如何主动向 HTML 元素添加一些内容，因为它清楚地了解它们的用途。更不用说底部的文字小注释很有帮助！

添加数据状态和事件

接下来，让我们直接进入一个复杂的任务，并要求它添加必要的功能以使按钮打开弹出框，我是这样给他修改组件代码指令的：

能否修改这些组件代码，让 ModalOpen 组件打开 Modal 组件弹出框呢

再次，执行是完美的！ ChatGPT 添加了必要的状态、点击事件侦听器和处理程序，以便所有这些都能正常工作。并且超额完成了任务，多实现了一个关闭弹出框的功能，我的指令并没有提及，看来他是个完美主义者。它给出的解释是还是十分完美的。我觉得这对初学者来说是一个很好的学习工具，因为它不仅可以满足您的要求，而且可以清楚地解释它。显然，在任何时候您都可以选择提出更多问题。

新建一个 ParentComponet 父组件

接下来，我们需要将这两个单独的组件，放到 ParentComponet 父组件，现在我们可以这样告诉 ChatGPT 让他们帮我们写一个 ParentComponet 父组件，指令提示语如下：

能否修改代码，将这两个组件引入 ParentComponet 组件里，方便我使用

没错，这个任务也是十分完美的完成了，而且文字注释我十分满意，到这里，你的感觉如何呢。

添加本地存储

接下来，我们提升门槛，让他完成更复杂的任务，测试它是否可以修改代码并将模态的状态保存在本地存储中。这允许我们即使在浏览器窗口关闭后也能保存模式的状态。接下来我给ChatGpt 如下提示语：

能否修改下 ParentComponent 组件的代码，将 isModalOpen 数据状态存储到本地缓存里(localStorage)？

执行再次完美，它正确地将布尔值转换为字符串，它也向我们解释了为什么它必须在代码中使用 useEffect，这显然不仅仅是文档中的一般复制粘贴，解释是用我们在代码中的确切变量名称来帮助理解的，我简直不太详细这是个机器人完成的，再次刷新了我的认知。

添加样式和动画

好吧，让我们看看它是否可以与 CSS 和动画一起使用，我认为这对 AI 来说会更棘手一些，第一次我是这么问的：

你能否帮我添加一些 css 动画效果代码呢，当我们点击 ModalOpen 组件，让 Modal 的显示和隐藏效果更自然些。

这段代码不仔细看，你以为它写对了，ChatGPT 也会打盹，一不小心也会糊弄过关，虽然乍一看是对的，但是父组件这样写 <Modal className={isModalOpen ? 'modal open' : 'modal close'} /> ，我们并没有在样式文件里定义 open 和 close ，其实在 open 和 close 加上这两个样式，本案例就完整了，还把本地缓存的逻辑搞丢了，但是我犯懒，不想自己写，继续让 AI 帮我改完吧, 看看能否满意。

接下来我下达修改的提示指令，看看他行不行，我是这样命令的：

请修复下样式文件，还有你把本地缓存的逻辑搞丢了，请修复你的代码

到这里算是修复的让我满意，大家是否满意呢？看来AI也是会犯错的，需要人去辅助。

改成 TypeScript 版本的组件

接下来我们继续提高写代码的难度，让其将组件的代码改成 TypeScript 版本的，看看他能否完成呢，我给了以下提示语：

你好，你能将上述组件的代码给出 typescript 版本的组件吗，请完整写出所有组件的代码

由于截图问题，不能完整截图，我这里把最终完整的代码贴出来，大家一起帮忙来挑错，目前我没发现问题，实在另外哇塞，感觉我有魔法，让 ChatGPT 完成我的魔法，很有成就感。

// ModalOpen.tsx
import React from 'react';

interface ModalOpenProps {
  onClick: () => void;
}

const ModalOpen: React.FC<ModalOpenProps> = ({ onClick }) => (
  <button onClick={onClick}>Open Modal</button>
);

export default ModalOpen;

// Modal.tsx
import React from 'react';
import './styles.css';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
}

const Modal: React.FC<ModalProps> = ({ isOpen, onClose }) => (
  <div className={`modal ${isOpen ? 'open' : 'close'}`}>
    <button onClick={onClose}>Close</button>
    <p>Modal content goes here</p>
  </div>
);

export default Modal;

// ParentComponent.tsx
import React, { useState, useEffect } from 'react';
import ModalOpen from './ModalOpen';
import Modal from './Modal';

const ParentComponent: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  useEffect(() => {
    const storedValue = localStorage.getItem('isModalOpen');
    if (storedValue) {
      setIsModalOpen(JSON.parse(storedValue));
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('isModalOpen', JSON.stringify(isModalOpen));
  }, [isModalOpen]);

  return (
    <div className="App">
      <ModalOpen onClick={() => setIsModalOpen(true)} />
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
    </div>
  );
};

export default ParentComponent;

// styles.css
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.modal.close {
  opacity: 0;
  visibility: hidden;
}

.modal p {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

增加列表数据需求

接下来我们继续增加需求，在 Modal 组件里，增加一些属性，比如显示用户的姓名和头像。我是这样给 ChatGPT 提示语的：

你好，你能基于改写的 TypeScript 版本里，修改Modal 组件代码，在 Modal 组件里定义如下属性：firstName, lastName,profession,profilePhoto，这些属性都是字符串类型的，并在 Modal 组件里显示这些属性的内容。

import React from 'react';
import './Modal.css';

interface ModalProps {
  firstName: string;
  lastName: string;
  profession: string;
  profilePhoto: string;
  isOpen: boolean;
  onClose: () => void;
}

const Modal: React.FC<ModalProps> = ({firstName, lastName, profession, profilePhoto, isOpen, onClose}) => {
  return (
    <div className={`modal ${isOpen ? 'open' : 'close'}`}>
      <div className="modal-content">
        <span className="close-button" onClick={onClose}>×</span>
        <p>First Name: {firstName}</p>
        <p>Last Name: {lastName}</p>
        <p>Profession: {profession}</p>
        <p>Profile Photo: {profilePhoto}</p>
      </div>
    </div>
  );
};

export default Modal;

完美的！完全没有错误，但我的指示很清楚。我们知道它可以理解变量背后的含义，所以我怀疑它能够找出所需的类型（我们稍后会验证这一点）。像往常一样，我们得到了详细的解释，但它并不那么有趣，所以让我们继续前进。

你好，你能继续在 Modal 组件里，增加一个 hobbies 的对象数组属性吗，其结构如下 {nameOfHobby:string; experienceInYears:number; activelyDoing:boolean}，修改完成后，请以表格的形式展现 hobbies 属性的数据，继续这些需求，请修改 Modal 组件代码

完成后的截图如，代码有点长，只截图部分：

完整的代码如下，大家一起 Review 评审下，看看有啥问题吗，我暂时没发下，只能说不错完美。

import React, { useState } from 'react';

interface Props {
  firstName: string;
  lastName: string;
  profession: string;
  profilePhoto: string;
  isOpen: boolean;
  onClose: () => void;
  hobbies: { nameOfHobby: string; experienceInYears: number; activelyDoing: boolean }[];
}

const Modal: React.FC<Props> = (props) => {
  const {
    firstName,
    lastName,
    profession,
    profilePhoto,
    isOpen,
    onClose,
    hobbies,
  } = props;

  return (
    <div className={`modal ${isOpen ? 'open' : 'close'}`}>
      <button onClick={onClose}>X</button>
      <div className="profile-info">
        <img src={profilePhoto} alt="profile" />
        <div>
          <h2>
            {firstName} {lastName}
          </h2>
          <p>Profession: {profession}</p>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>Hobby</th>
            <th>Experience (in Years)</th>
            <th>Actively Doing?</th>
          </tr>
        </thead>
        <tbody>
          {hobbies.map((hobby, index) => (
            <tr key={index}>
              <td>{hobby.nameOfHobby}</td>
              <td>{hobby.experienceInYears}</td>
              <td>{hobby.activelyDoing ? 'Yes' : 'No'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Modal;

您能看到它如何增加爱好，经验（年）以及目前在桌子标题上做的吗？而且它还理解，输出积极的布尔值，将其转换为“是”或“否”。实在令人经验，让我感觉到有压力了。

引入第三方库

接下来，让我们看看它是否可以按字母顺序对我们的爱好对象进行排序，并可能使用外部库来解决该问题，我是这样给他提示语的：

你好，在完成的 Modal 组件里，我想针对 hobbies 对象数组进行排序，依据 nameOfHobby 属性，你可以引入第三方库，请修改 Modal 组件代码

完成的代码：

import React from 'react';
import { string, number, boolean, arrayOf } from 'prop-types';
import { sortBy } from 'lodash';

interface Hobby {
  nameOfHobby: string;
  experienceInYears: number;
  activelyDoing: boolean;
}

interface Props {
  firstName: string;
  lastName: string;
  profession: string;
  profilePhoto: string;
  hobbies: Hobby[];
  isOpen: boolean;
  onClose: () => void;
}

const Modal: React.FC<Props> = (props) => {
  const { firstName, lastName, profession, profilePhoto, hobbies, isOpen, onClose } = props;

  const sortedHobbies = sortBy(hobbies, ['nameOfHobby']);

  return (
    <div className={`modal ${isOpen ? 'open' : 'close'}`}>
      <div className="modal-header">
        <h2>{firstName} {lastName}</h2>
        <p>{profession}</p>
        <img src={profilePhoto} alt={`${firstName} ${lastName}`} />
      </div>
      <div className="modal-body">
        <h3>Hobbies:</h3>
        <table>
          <thead>
            <tr>
              <th>Name of Hobby</th>
              <th>Experience in Years</th>
              <th>Actively Doing</th>
            </tr>
          </thead>
          <tbody>
            {sortedHobbies.map((hobby) => (
              <tr key={hobby.nameOfHobby}>
                <td>{hobby.nameOfHobby}</td>
                <td>{hobby.experienceInYears}</td>
                <td>{hobby.activelyDoing ? 'Yes' : 'No'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="modal-footer">
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

Modal.propTypes = {
  firstName: string.isRequired,
  lastName: string.isRequired,
  profession: string.isRequired,
  profilePhoto: string.isRequired,
  hobbies: arrayOf(
    shape({
      nameOfHobby: string.isRequired,
      experienceInYears: number.isRequired,
      activelyDoing: boolean.isRequired,
    }),
  ).isRequired,
  isOpen: boolean.isRequired,
  onClose: func.isRequired,
};

export default Modal;

再次完美执行：它决定使用lodash，导入它并写出逻辑以按我们要求的属性进行排序。再次，非常令人印象深刻！

结束

好了，本次测试就到这里，我们就不再折腾 ChatGPT 了，他估计也累了。

本次试验，我努力尝试打破它，让他犯错，但它几乎完美地执行了我的指示，并且似乎理解诸如“爱好”之类的变量的潜在含义，因为它主动添加了我不需要要求的更多需求。

它完美地实现了 React 组件、事件监听器、处理本地存储、样式、动画、使用外部库和 TypeScript 类型，以及数据排序的功能。

就我个人而言，（目前）我并没有感到受到威胁，因为我认为它可以执行简单而微不足道的任务。很明显，您需要成为一名经验丰富的开发人员，才能围绕架构和实施做出复杂的创造性决策，否则您无法让AI帮你完成简单的开发任务，你需要不断地让AI帮你修正错误。

在目前的阶段，我可以将其视为一个 VSCode 插件：我不用打字，而是通过语言提示，让 AI 为我构建元素，在几秒钟内快速完成通常需要我需要花费 5-10 分钟的重复性任务。正如我们在本测试中看到的那样，它的表现非常出色！

人工智能虽然很可怕，但最终，它有可能消除我们工作中不需要创造性思维的重复、无聊的事情。因此，我们可以更快地完成任务，并能够将更多时间花在我们真正喜欢做的事情上！

你怎么看待这件事？？这将如何改变我们今天所知道的职业？作为开发人员，您将如何将其纳入您的工作流程？这将如何影响整个行业？

今天的分享就到这里，这是我的一些尝试，你是怎么用ChatGpt写代码的，欢迎在评论区分享。感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

思路来源：
https://medium.com/bitsrc/i-asked-chatgpt-ai-to-write-react-and-javascript-for-me-and-i-was-shocked-detailed-analysis-d68d55be7746

作者：Mate Marschalko

注释：非翻译，有中文示例改编和案例增加