大家好，我卡頌。

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

• 理論知識、學習指引
• API介紹

從形式上看，新文檔除了傳統的文字內容，還包括：

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

可以說是閱讀體驗拉滿。

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

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

本文來聊聊GPT-4與React文檔結合后產生的奇妙體驗。

GPT如何學習文檔內容

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

實現起來很簡單，只需2步：

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

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

// 復制文檔文本內容
copy(document.querySelector('main').innerText)

2. 將文本內容復制給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[2]一節，該節講解了一些常見的useEffect使用誤區。GPT提供的解決思路正是該節提到的 —— 將useEffect部分邏輯抽離到事件回調中。

優秀的編程助手

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

得益于優秀的文檔，GPT已經掌握React最佳實踐。現在，你可以將業務代碼直接投喂給GPT，讓他分析代碼有沒有不符合最佳實踐的地方，并給出修改意見。

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

總結

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

隨著GPT的發展，一種體驗更好的方式已經出現 —— 提供非常詳細的文檔，GPT學習并充分理解文檔作者想要傳達的思想后，再作為編程助手的角色輔助開發者開發。

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

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

當然，一切的前提是 —— 有非常詳細、沒有紕漏、邏輯自洽的文檔。所以，你把微信小程序文檔投給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/。