大家好，我卡頌。

最近，React[1]新文檔終于上線了。從內(nèi)容上看，新文檔包括：

• 理論知識、學(xué)習(xí)指引
• API介紹

從形式上看，新文檔除了傳統(tǒng)的文字內(nèi)容，還包括：

• 在線Demo
• 示意圖
• 小測驗

可以說是閱讀體驗拉滿。

但是，由于文檔中理論部分內(nèi)容太詳細（比如與useEffect相關(guān)就有5節(jié)內(nèi)容），閱讀起來太費時間。且當前官方僅有英文版本，所以對國內(nèi)開發(fā)者不太友好。

恰巧最近GPT-4發(fā)布，將React新文檔投喂給他后，完美解決了上述問題。并且，由于React新文檔講的實在是太清楚了，以至于學(xué)習(xí)了文檔的GPT完全能夠勝任編程助理的角色。

本文來聊聊GPT-4與React文檔結(jié)合后產(chǎn)生的奇妙體驗。

GPT如何學(xué)習(xí)文檔內(nèi)容

由于GPT-4的訓(xùn)練數(shù)據(jù)截止到21年9月，所以他無法提供那之后發(fā)布的內(nèi)容相關(guān)的信息。所以，首先我們要給他手動投喂React文檔。

實現(xiàn)起來很簡單，只需2步：

1. 在需要投喂的文檔頁打開控制臺，執(zhí)行下述代碼：

// 清除所有代碼示例，只保留文字內(nèi)容
document.querySelectorAll('main code').forEach(item => {item.remove()})

// 復(fù)制文檔文本內(nèi)容
copy(document.querySelector('main').innerText)

2. 將文本內(nèi)容復(fù)制給GPT：

如果文檔內(nèi)容太長，可以分段投喂：

至此，我們就得到了熟讀React文檔的GPT。那么，熟讀文檔的GPT相比未學(xué)習(xí)之前都有哪些能力提升呢？

文檔大神煉成

得益于「Dan」（React新文檔作者）編寫的邏輯清晰、由淺入深的文檔內(nèi)容，學(xué)習(xí)過文檔的GPT比學(xué)習(xí)文檔前對React有了更深的理解。

比如，對于如下代碼，在useEffect的使用上有什么問題么（讀者可以先自己試著找找問題）：

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

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

這段代碼沒有邏輯或語法上的問題。所以，對于未學(xué)過新文檔的GPT，雖然他能完全理解這段代碼的作用，但并不能發(fā)現(xiàn)問題：

React Hooks發(fā)布于19年2月的v16.8，所以GPT知道Hooks如何使用：

在學(xué)過新文檔后，GPT可以明確指出例子中使用useEffect的方式可能會導(dǎo)致的問題：

同時，他還提出了解決辦法 —— 在事件回調(diào)中直接設(shè)置selection為null，而不是使用useEffect。

實際上，這個Demo出自You Might Not Need an Effect[2]一節(jié)，該節(jié)講解了一些常見的useEffect使用誤區(qū)。GPT提供的解決思路正是該節(jié)提到的 —— 將useEffect部分邏輯抽離到事件回調(diào)中。

優(yōu)秀的編程助手

讓GPT學(xué)習(xí)文檔后，還能解鎖一個強大能力 —— 私人編程助手。

得益于優(yōu)秀的文檔，GPT已經(jīng)掌握React最佳實踐?，F(xiàn)在，你可以將業(yè)務(wù)代碼直接投喂給GPT，讓他分析代碼有沒有不符合最佳實踐的地方，并給出修改意見。

比如，對于上述代碼，GPT給出了修改后的代碼：

總結(jié)

文檔體驗一直是各大開源項目都在重點發(fā)力的地方。以往大家的思路是 —— 提供各種方便開發(fā)者理解的工具（比如repl、在線Demo、視頻文檔...）。

隨著GPT的發(fā)展，一種體驗更好的方式已經(jīng)出現(xiàn) —— 提供非常詳細的文檔，GPT學(xué)習(xí)并充分理解文檔作者想要傳達的思想后，再作為編程助手的角色輔助開發(fā)者開發(fā)。

比如最近，Astro團隊發(fā)布的Houston AI[3]就是投喂了Astro文檔的GPT-3，Vue團隊也在探索這方面的可能性。

受限于GPT token費用，這種模式還無法大規(guī)模普及。但這完全不妨礙個人開發(fā)者根據(jù)本文的思路訓(xùn)練自己的編程助手，這無疑是生產(chǎn)力的巨大提升。

當然，一切的前提是 —— 有非常詳細、沒有紕漏、邏輯自洽的文檔。所以，你把微信小程序文檔投給GPT后，他該懵圈還得懵圈......

參考資料

[1]React:https://react.dev/。

[2]You Might Not Need an Effect:https://react.dev/learn/you-might-not-need-an-effect。

[3]Houston AI:https://houston.astro.build/。