把React新文檔投喂給 GPT-4 后，會發生什么呢？

作者：卡頌 2023-03-20 07:12:54

開發前端

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

大家好，我卡頌。

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

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

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

在線Demo
示意圖
小測驗

可以說是閱讀體驗拉滿。

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

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

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

GPT如何學習文檔內容

由于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]);
  // ...
}