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

大家好，我卡颂。

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

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

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

在线Demo
示意图
小测验

能够说是浏览体验拉满。

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

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

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

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

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

实现起来很简略，只需 2 步：

在须要投喂的文档页关上控制台，执行下述代码：

// 革除所有代码示例，只保留文字内容
document.querySelectorAll('main code').forEach(item => {item.remove()})

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

将文本内容复制给GPT：

如果文档内容太长，能够分段投喂：

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

得益于 Dan（React 新文档作者）编写的逻辑清晰、由浅入深的文档内容，学习过文档的 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 的形式可能会导致的问题：

同时，他还提出了解决办法 —— 在事件回调中间接设置 selection 为null，而不是应用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-3，Vue 团队也在摸索这方面的可能性。

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

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

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

GPT 如何学习文档内容

文档大神炼成

优良的编程助手

总结