JavaScript >> Javascript 文檔 >  >> React

在進入 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 有一定的了解 (任務隊列、微任務隊列和可能的分塊)將真正提升您作為開發人員的水平。這方面的視頻很多,您可以隨意選擇您喜歡的視頻。


Tutorial JavaScript 教程
  1. 如何在 Vue 和 TypeScript 中使用 Chart.js

  2. 什麼是德諾?

  3. 使用 Vue 構建在線課程應用

  4. 指南 - JavaScript 和 React 單元測試基礎知識

  5. Mongoose Schema 簡介

  6. 我不同意你的 cookie 同意對話框

  7. 動物手風琴

  1. 如何在 React 中創建自定義表格組件

  2. 從靜態到交互式:為什麼可恢復性是水化的最佳替代品

  3. 現代 JavaScript 如何破壞 Web 與 Chris Ferdinandi

  4. 100 天代碼:React、Python 和...

  5. React Native Web:React Devs,你為什麼不使用 React Native for Web?

  6. 如何學習 React - 有效的方法

  7. localstorage.getItem() 在 NUXT JS 中不起作用

  1. NodeJS 與 ExpressJS 和 TypeScript 第 1 部分。

  2. 放大和反應:將任務保存到後端

  3. 如何使用引導程序在 vue.js 中創建響應式導航欄

  4. 如何將 Angular 應用程序放入 Docker 容器