建站
咨詢
售后
建站咨詢
新聞中心
公司主營業(yè)務(wù)：做網(wǎng)站、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出連城免費做網(wǎng)站回饋大家。
大家好，我卡頌。
最近，React[1]新文檔終于上線了。從內(nèi)容上看，新文檔包括：
- 理論知識、學(xué)習(xí)指引
- API介紹
從形式上看，新文檔除了傳統(tǒng)的文字內(nèi)容，還包括：
- 在線Demo
- 示意圖
- 小測驗
可以說是閱讀體驗拉滿。
但是，由于文檔中理論部分內(nèi)容太詳細（比如與useEffect相關(guān)就有5節(jié)內(nèi)容），閱讀起來太費時間。且當(dāng)前官方僅有英文版本，所以對國內(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步：
- 在需要投喂的文檔頁打開控制臺，執(zhí)行下述代碼：
// 清除所有代碼示例，只保留文字內(nèi)容
document.querySelectorAll('main code').forEach(item => {item.remove()})
// 復(fù)制文檔文本內(nèi)容
copy(document.querySelector('main').innerText)
- 將文本內(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)力的巨大提升。
當(dāng)然，一切的前提是 —— 有非常詳細、沒有紕漏、邏輯自洽的文檔。所以，你把微信小程序文檔投給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/。
文章題目：把React新文檔投喂給GPT-4后，會發(fā)生什么呢？
本文鏈接：http://m.fisionsoft.com.cn/article/cdcdesi.html
