关于react.js:把React新文档投喂给-GPT4-后

大家好,我卡颂。

最近,React新文档终于上线了。从内容上看,新文档包含:

  • 理论知识、学习指引
  • API介绍

从模式上看,新文档除了传统的文字内容,还包含:

  • 在线Demo
  • 示意图
  • 小测验

能够说是浏览体验拉满。

然而,因为文档中实践局部内容太具体(比方与useEffect相干就有5节内容),浏览起来太费时间。且以后官网仅有英文版本,所以对国内开发者不太敌对。

凑巧最近GPT-4公布,将React新文档投喂给他后,完满解决了上述问题。并且,因为React新文档讲的切实是太分明了,以至于学习了文档的GPT齐全可能胜任编程助理的角色。

本文来聊聊GPT-4React文档联合后产生的微妙体验。

欢送退出人类高质量前端交换群,带飞

GPT如何学习文档内容

因为GPT-4的训练数据截止到21年9月,所以他无奈提供那之后公布的内容相干的信息。所以,首先咱们要给他手动投喂React文档。

实现起来很简略,只需2步:

  1. 在须要投喂的文档页关上控制台,执行下述代码:
// 革除所有代码示例,只保留文字内容
document.querySelectorAll('main code').forEach(item => {item.remove()})

// 复制文档文本内容
copy(document.querySelector('main').innerText)
  1. 将文本内容复制给GPT

如果文档内容太长,能够分段投喂:

至此,咱们就失去了熟读React文档的GPT。那么,熟读文档的GPT相比未学习之前都有哪些能力晋升呢?

文档大神炼成

得益于DanReact新文档作者)编写的逻辑清晰、由浅入深的文档内容,学习过文档的GPT比学习文档前对React有了更深的了解。

比方,对于如下代码,在useEffect的应用上有什么问题么(读者能够先本人试着找找问题):

function List({ items }) {
  const [isReverse, setIsReverse] = useState(false);
  const [selection, setSelection] = useState(null);

  useEffect(() => {
    setSelection(null);
  }, [items]);
  // ...
}

这段代码没有逻辑或语法上的问题。所以,对于未学过新文档的GPT,尽管他能齐全了解这段代码的作用,但并不能发现问题:

React Hooks公布于19年2月的v16.8,所以GPT晓得Hooks如何应用:

在学过新文档后,GPT能够明确指出例子中应用useEffect的形式可能会导致的问题:

同时,他还提出了解决办法 —— 在事件回调中间接设置selectionnull,而不是应用useEffect

实际上,这个Demo出自You Might Not Need an Effect一节,该节解说了一些常见的useEffect应用误区。GPT提供的解决思路正是该节提到的 —— 将useEffect局部逻辑抽离到事件回调中。

优良的编程助手

GPT学习文档后,还能解锁一个弱小能力 —— 私人编程助手。

得益于优良的文档,GPT曾经把握React最佳实际。当初,你能够将业务代码间接投喂给GPT,让他剖析代码有没有不合乎最佳实际的中央,并给出修改意见。

比方,对于上述代码,GPT给出了批改后的代码:

总结

文档体验始终是各大开源我的项目都在重点发力的中央。以往大家的思路是 —— 提供各种不便开发者了解的工具(比方repl、在线Demo、视频文档…)。

随着GPT的倒退,一种体验更好的形式曾经呈现 —— 提供十分具体的文档,GPT学习并充沛了解文档作者想要传播的思维后,再作为编程助手的角色辅助开发者开发。

比方最近,Astro团队公布的Houston AI就是投喂了Astro文档的GPT-3Vue团队也在摸索这方面的可能性。

受限于GPT token费用,这种模式还无奈大规模遍及。但这齐全不障碍集体开发者依据本文的思路训练本人的编程助手,这无疑是生产力的微小晋升。

当然,所有的前提是 —— 有十分具体、没有纰漏、逻辑自洽的文档。所以,你把微信小程序文档投给GPT后,他该懵逼还得懵逼……

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据