最近一段時間，又重新涉獵了一些空白領域，比如前端 React 的學習。由於預估不足，當我翻開 React 教程時，看到了一下文字，讓我繃不住了。
在學習 React 之前，需要掌握以下基礎知識：
- HTML
- CSS
- JavaScript 基礎
- ES6+ 語法
不僅如此，還需要學習 TypeScript ，著實讓我頭大。所以採取了快速學習的策略，先從概念入手，然後直接手敲程式碼，配合 AI 助手，也算是磕磕絆絆走完了基礎知識的學習。
在學習 React 的過程裡，我想給教程裡面一個 input 標籤增加一個功能，點選清除原有內容的，用到了下面的程式碼：
document.getElementById('input-name').value = '';
然後就出 BUG ，怎麼也無法繼續輸入內容了，彷彿每次輸入內容之後都會清空一樣。所以請教了一個高段位的朋友。
高手不愧是高手，一眼就看出來問題了。首先說了一下程式碼的問題，然後告訴我應該直接修改輸入框的裡面賦值變數的值，而不是直接修改 input 輸入框的 value 。下面是這個變數的宣告語句：
const [newName, setNewName] = useState("");
同時他還強調了，我的哪個語法不符合 React 的核心思想，可以說並不是 React 語法（其實是我問的 AI 助手的結果）。根據教程的專案簡單講解了 React 的一個核心思想： 資料驅動 。
資料驅動 ，這意味著 UI 是由資料狀態驅動的，元件的檢視會隨著資料的變化自動更新。這一思想使得開發者可以更清晰、更高效地管理和維護複雜的使用者介面。比如我想的哪個功能，因為我設定了輸出框的內容為 newName ，所以只要我相對內容進行修改，就只需要呼叫 setNewName 方法即可。不用關心 HTML 哪些標籤的內容。這樣讓功能簡潔了很多，程式碼也具有更強的可讀性和可維護性。
經過講解，我一下子對 React 的設計思想有了模糊的認識，也瞭解了 React 之所以流行的原因，果然讓開發者省去了很多不必要的麻煩，專注於特定功能的開發和維護。
學習新領域知識，難免會遇到問題。搜尋網頁或者諮詢 AI 助手，或許是可以得到答案，但跟高段位的請教，卻能得到答案以外的知識。比如我的這次請教，不僅解決了 BUG ，還接受了 React 的設計思想，對於後面的學習起到事半功倍的助推效果。
高段位的選手往往具有對工具和框架更深入的理解，能夠從更高層次的角度解釋問題，分析原因，提供全面的知識講解。他們往往擁有較長的實踐經驗，避免小白在一些坑裡面爬不出來，指導學習的路線和進度。
上一次有這種級別的指導，得到了一個寶貴的建議： 你可以考慮一下 Groovy 。熟悉的同學應該能體會到這個建議對我的影響。到現在，受益匪淺。
所以如果對於新手小白來講，進入一個空白的新領域，想高段位請教是一個非常好的學習提升途徑。
- 2021 年原創合集
- 2022 年原創合集
- 2023 年原創合集
- 服務端功能測試
- 效能測試專題
- Java、Groovy、Go、Python
- 單元&白盒&工具合集
- 測試方案&BUG&爬蟲&UI 自動化
- 測試理論雞湯
- 社群風采&影片合集