在進入 React 之前學習這個
過早做出反應可能是一個錯誤,從長遠來看會傷害你。在這篇文章中,我將列出 5 件最重要的事情 你應該有下來,這樣你就可以確信你的基礎是強大的,你可以通過學習反應滑行。
目錄:
-
語法
-
DOM 操作和事件
-
異步性
-
這個 關鍵詞
-
調用棧
語法
這個應該是必備的,因為 React 是一個庫 它是基於 JavaScript 構建的。語法包括但不限於 以下內容:聲明函數和變量、for 循環、if 語句、數組、對象、運算符等。我強烈建議至少構建一個項目(項目創意),看看所有這些東西是如何結合在一起的。
DOM 操作和事件
學習操作 DOM(文檔對像模型)可能是一個開始的好方法 將不同的語言“連接”在一起並相應地改變它。以下是您將在大約 90-95% 的時間內執行的常見 DOM:
- 創建元素
- 添加元素
- 修改數據屬性
- 移除元素
Web Dev Simplified 的這個視頻是了解 DOM 的真正含義以及如何在某些場景中正確使用它的一個很好的開始。 事件監聽器 也很重要,並且可以與 DOM 相關聯,因為您實際上是在監聽發生的任何事件。例如,如果我有一個表單並且我想接收某人編寫的信息,我可以實現一個提交按鈕並為其設置一個事件偵聽器,因此一旦該人單擊該按鈕,我就可以獲取並存儲此信息在對像或本地存儲中。該視頻也是由 Web Dev Simplified 提供的,他從概念上和實踐上完美地解釋了事件偵聽器。
異步性
這是一個可能會嚇到某些人的大詞,但它真正所做的只是等到某個動作完成後再完成另一個動作,所以基本上一次做一件事。您通常會使用回調、承諾或異步等待 關鍵字從 RESTFUL API 獲取數據並將其解析為 JSON(JavaScript 對象表示法),因為 API 通常以字符串化方式存儲。 Traverse Media 的這個視頻很好地介紹了這一點,它深入探討了回調、承諾和異步等待。
這個 關鍵字
this 引起了強烈反響 關鍵字,但它真正的作用如下:
這個關鍵字屬於它所屬的對象
- 單獨,this 指的是全局對象。
- 在常規函數中,this 指的是全局對象。
- 在方法中,this 指的是所有者對象。
您還可以顯式綁定 它帶有一個函數,使用以下方法:
-
調用() | [c]all 接受(c 表示逗號分隔的參數)。調用函數
-
綁定() |返回一個可以調用的新函數,它只允許你綁定你想要的任何對象
-
應用() | [a]apply 接受(a 表示參數數組)。調用函數
它基本上引用了代碼當前運行的上下文。這可能有點難以理解,techsith 的這段視頻涵蓋了 this 關鍵字 well 在幾乎所有場景中。我之所以不具體深入探討這一點,是因為我認為觀看帶有代碼示例的視頻是真正理解它的更好方法。
調用堆棧
出於某種原因,這並沒有被太多提及,但我認為了解調用堆棧的工作原理會讓您更加了解調用函數的順序。只需對 JavaScript 引擎的基本知識有一個非常基本的了解 和 JavaScript 運行時環境 將使您與其他開發人員區分開來,並在您投入反應時很好地延續。此外,對整體 Event Loop 有一定的了解 (任務隊列、微任務隊列和可能的分塊)將真正提升您作為開發人員的水平。這方面的視頻很多,您可以隨意選擇您喜歡的視頻。