转载说明：原创不易，未经授权，谢绝任何形式的转载
我尽了全力，唤醒了 写代码的能力
介绍
听起来好得令人难以置信，所以让我们让它为我们编写一些 JS 代码。我想看看它是否可以解决我作为前端开发人员每天所做的任务。
是驴子是马拉出来溜溜，我们还是直接进入主题一探究竟。
在 React 中构建弹出框组件模板
虽然这是可能的，但我们不要通过添加一些代码来开始这个实验。让我们简单地要求 创建两个 React 组件，这两个组件将成为弹出窗的元素和一个切换其可见性的按钮，一开始我是这么问的：
单独创建一个只有按钮()的React函数组件的文件，其名字是 。然后再单独创建一个叫 Modal 的函数组件文件，有个 div 在 Modal 函数组件里。
结果把我没有提及到的功能，弹出事件也写出来了，实在令我震惊！
大家看完以上截图是不是震惊？但是我不想让他这样实现我还未说的功能，我修改了创建代码的指令，修改如下：
单独创建一个只有按钮()的React函数组件的文件，其名字是 。然后再单独创建一个叫 Modal 的函数组件文件，有个 div 在 Modal 函数组件里。暂时不要包含事件，只是组件样式而已。
这个简单的任务完成得很完美！请注意它如何主动向 HTML 元素添加一些内容，因为它清楚地了解它们的用途。更不用说底部的文字小注释很有帮助！
添加数据状态和事件
接下来，让我们直接进入一个复杂的任务，并要求它添加必要的功能以使按钮打开弹出框，我是这样给他修改组件代码指令的：
能否修改这些组件代码，让 组件打开 Modal 组件弹出框呢
再次，执行是完美的！ 添加了必要的状态、点击事件侦听器和处理程序，以便所有这些都能正常工作。并且超额完成了任务，多实现了一个关闭弹出框的功能，我的指令并没有提及，看来他是个完美主义者。它给出的解释是还是十分完美的。我觉得这对初学者来说是一个很好的学习工具，因为它不仅可以满足您的要求，而且可以清楚地解释它。显然，在任何时候您都可以选择提出更多问题。
新建一个 父组件
接下来，我们需要将这两个单独的组件，放到 父组件，现在我们可以这样告诉 让他们帮我们写一个 父组件，指令提示语如下：
能否修改代码，将这两个组件引入 组件里，方便我使用
没错，这个任务也是十分完美的完成了，而且文字注释我十分满意，到这里，你的感觉如何呢。
添加本地存储
接下来，我们提升门槛，让他完成更复杂的任务，测试它是否可以修改代码并将模态的状态保存在本地存储中。这允许我们即使在浏览器窗口关闭后也能保存模式的状态。接下来我给 如下提示语：
能否修改下 组件的代码，将 数据状态存储到本地缓存里()？
执行再次完美，它正确地将布尔值转换为字符串，它也向我们解释了为什么它必须在代码中使用 ，这显然不仅仅是文档中的一般复制粘贴，解释是用我们在代码中的确切变量名称来帮助理解的，我简直不太详细这是个机器人完成的，再次刷新了我的认知。
添加样式和动画
好吧，让我们看看它是否可以与 CSS 和动画一起使用，我认为这对 AI 来说会更棘手一些，第一次我是这么问的：
你能否帮我添加一些 css 动画效果代码呢，当我们点击 组件，让 Modal 的显示和隐藏效果更自然些。
这段代码不仔细看，你以为它写对了， 也会打盹，一不小心也会糊弄过关，虽然乍一看是对的，但是父组件这样写 ，我们并没有在样式文件里定义 open 和 close ，其实在 open 和 close 加上这两个样式，本案例就完整了，还把本地缓存的逻辑搞丢了，但是我犯懒，不想自己写，继续让 AI 帮我改完吧, 看看能否满意。
接下来我下达修改的提示指令，看看他行不行，我是这样命令的：
请修复下样式文件，还有你把本地缓存的逻辑搞丢了，请修复你的代码
到这里算是修复的让我满意，大家是否满意呢？看来AI也是会犯错的，需要人去辅助。
改成 版本的组件
接下来我们继续提高写代码的难度，让其将组件的代码改成 版本的，看看他能否完成呢，我给了以下提示语：
你好，你能将上述组件的代码给出 版本的组件吗，请完整写出所有组件的代码
由于截图问题，不能完整截图，我这里把最终完整的代码贴出来，大家一起帮忙来挑错，目前我没发现问题，实在另外哇塞，感觉我有魔法，让 完成我的魔法，很有成就感。
// ModalOpen.tsx
import React from 'react';
interface ModalOpenProps {
onClick: () => void;
}
const ModalOpen: React.FC = ({ onClick }) => (
);
export default ModalOpen;
// Modal.tsx
import React from 'react';
import './styles.css';
interface ModalProps {
isOpen: boolean;
onClose: () => void;
}
const Modal: React.FC = ({ isOpen, onClose }) => (
Modal content goes here
);
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 (
setIsModalOpen(true)} />
setIsModalOpen(false)} />
);
};
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 组件里，增加一些属性，比如显示用户的姓名和头像。我是这样给 提示语的：
你好，你能基于改写的 版本里，修改Modal 组件代码，在 Modal 组件里定义如下属性：, ,,，这些属性都是字符串类型的，并在 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 = ({firstName, lastName, profession, profilePhoto, isOpen, onClose}) => {
return (
×
First Name: {firstName}
Last Name: {lastName}
Profession: {profession}
Profile Photo: {profilePhoto}
);
};
export default Modal;
完美的！完全没有错误，但我的指示很清楚。我们知道它可以理解变量背后的含义，所以我怀疑它能够找出所需的类型（我们稍后会验证这一点）。像往常一样，我们得到了详细的解释，但它并不那么有趣，所以让我们继续前进。
你好，你能继续在 Modal 组件里，增加一个 的对象数组属性吗，其结构如下 {:; :; :}，修改完成后，请以表格的形式展现 属性的数据，继续这些需求，请修改 Modal 组件代码
完成后的截图如，代码有点长，只截图部分：
完整的代码如下，大家一起 评审下，看看有啥问题吗，我暂时没发下，只能说不错完美。
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) => {
const {
firstName,
lastName,
profession,
profilePhoto,
isOpen,
onClose,
hobbies,
} = props;
return (
{firstName} {lastName}
Profession: {profession}
Hobby
Experience (in Years)
Actively Doing?
{hobbies.map((hobby, index) => (
{hobby.nameOfHobby}
{hobby.experienceInYears}
{hobby.activelyDoing ? 'Yes' : 'No'}
))}
);
};
export default Modal;
您能看到它如何增加爱好，经验（年）以及目前在桌子标题上做的吗？而且它还理解，输出积极的布尔值，将其转换为“是”或“否”。实在令人经验，让我感觉到有压力了。
引入第三方库
接下来，让我们看看它是否可以按字母顺序对我们的爱好对象进行排序，并可能使用外部库来解决该问题，我是这样给他提示语的：
你好，在完成的 Modal 组件里，我想针对 对象数组进行排序，依据 属性，你可以引入第三方库，请修改 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) => {
const { firstName, lastName, profession, profilePhoto, hobbies, isOpen, onClose } = props;
const sortedHobbies = sortBy(hobbies, ['nameOfHobby']);
return (
{firstName} {lastName}
{profession}
Hobbies:
Name of Hobby
Experience in Years
Actively Doing
{sortedHobbies.map((hobby) => (
{hobby.nameOfHobby}
{hobby.experienceInYears}
{hobby.activelyDoing ? 'Yes' : 'No'}
))}
);
};
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;
再次完美执行：它决定使用，导入它并写出逻辑以按我们要求的属性进行排序。再次，非常令人印象深刻！
结束
好了，本次测试就到这里，我们就不再折腾 了，他估计也累了。
本次试验，我努力尝试打破它，让他犯错，但它几乎完美地执行了我的指示，并且似乎理解诸如“爱好”之类的变量的潜在含义，因为它主动添加了我不需要要求的更多需求。
它完美地实现了 React 组件、事件监听器、处理本地存储、样式、动画、使用外部库和 类型，以及数据排序的功能。
就我个人而言，（目前）我并没有感到受到威胁，因为我认为它可以执行简单而微不足道的任务。很明显，您需要成为一名经验丰富的开发人员，才能围绕架构和实施做出复杂的创造性决策，否则您无法让AI帮你完成简单的开发任务，你需要不断地让AI帮你修正错误。
在目前的阶段，我可以将其视为一个 插件：我不用打字，而是通过语言提示，让 AI 为我构建元素，在几秒钟内快速完成通常需要我需要花费 5-10 分钟的重复性任务。正如我们在本测试中看到的那样，它的表现非常出色！
人工智能虽然很可怕，但最终，它有可能消除我们工作中不需要创造性思维的重复、无聊的事情。因此，我们可以更快地完成任务，并能够将更多时间花在我们真正喜欢做的事情上！
你怎么看待这件事？？这将如何改变我们今天所知道的职业？作为开发人员，您将如何将其纳入您的工作流程？这将如何影响整个行业？
