学习React之前必须了解的前12个JavaScript概念

React.js是一个开源免费的JavaScript库，用于构建网站的前端。您必须记住它不是一个框架或语言，而是用于创建用户界面（UI）的库，并且是基于组件的。在React.js中，您可以创建非常有助于开发人员重复使用的组件。由于 React.js是基于组件的 并且使用虚拟DOM，这将使Web应用程序更快，更易于扩展。

但在学习React.js之前，对JavaScript、HTML和CSS有很好的理解是非常重要的。因此，在本文中，我们将看到一些在学习React.js之前每个人都应该了解的JavaScript概念。

在学习React之前应该了解的JavaScript概念

由于React.js是JavaScript的库，所以清楚地了解JavaScript的基本原理和语法非常重要。掌握JavaScript基础知识将有助于您更轻松、更快地学习React.js。在学习React.js之前，这里有一些必须了解的JavaScript概念：

1. JavaScript中的变量

变量用于存储可以在代码中访问和使用的数据。但在学习这个之前，您应该了解基本概念，如数据类型、块作用域、if-else语句以及JavaScript的一些独特特性，如“”和“=”运算符。现在来看JavaScript变量，它们是动态的，即在运行时可以更改其值和数据类型。
为了分配变量，我们通常使用以下关键字：

var – 使用“var”关键字声明后，可以在作用域中多次更新和重新分配。
let – 使用“let”关键字创建的变量可以更新，但不可重新声明。
const – 使用“const”关键字创建的变量既不能更新，也不能重新声明。

示例:

// Var Example 
var age = 25; 
console.log(age);  
  
// Variable can be redeclared and updated 
var age = 30; 
console.log(age); 
  
// Let Example 
  
let name = "gfg"; 
console.log(name);  
  
// Variable can be reassigned 
name = "GeeksforGeeks"; 
console.log(name);

输出

25
30
gfg
GeeksforGeeks

示例：

// Const Example 
  
const pi = 3.14159; 
console.log(pi);  
  
// Error: Assignment to a constant variable 
pi = 3.14;

输出

3.14159
Error: Assignment to a constant variable.

2. JavaScript中的函数和箭头函数

函数用于应用DRY（不要重复你自己）原则。为了有效地使用React.js，您需要学习JavaScript中的函数和箭头函数，因为React Hooks只能由函数实现，而且它们只能在函数式组件中使用。由于应用程序的功能增加，代码库也会相应增长，因此使用函数和箭头函数可以方便地封装逻辑并保持代码的可读性和可重用性。此外，它还可以帮助处理事件。函数声明是使用function关键字编写的具有名称的函数。它们在JavaScript中是提升的。它们有一个return语句来指定函数的输出。箭头函数是一个无名函数，是函数表达式的简便替代。它没有’this’关键字，也没有function关键字。

示例：

// Function Declaration 
function multiply(a,b){ 
    return (a*b); //returning the multiplication of two numbers 
} 
  
console.log(multiply(3,5)); 
  
  
// Arrow Function 
let addition = (a,b)=>{ 
        return (a+b); 
} 
  
console.log(addition(3,5));

输出

15
8

3. JavaScript中的对象

对于React.js组件来说，理解对象非常重要，因为React.js组件本质上就是JavaScript对象，所以要更好地理解React组件的结构，就需要了解对象。在React组件中，方法用作事件处理程序，了解对象使你能够处理事件并执行操作，因为对象具有方法，这些方法是附加在对象上的函数。

示例：

let gfg ={ 
  fullName: "GeeksforGeeks", 
  type: "edTech", 
  location: "Noida"
} 
  
console.log(gfg)

输出

{ fullName: 'GeeksforGeeks', type: 'edTech', location: 'Noida' }

4. JavaScript中的解构赋值

这是JavaScript中的一个重要概念，它帮助我们从任何数组或对象中提取所需的数据。但在深入研究之前，您应该了解JavaScript中的数组及其方法的知识，要了解更多，请参阅文章 – 数组及其方法。

数组解构赋值示例：

const vehicles = ['Swift', 'Blackhawk', 'Fortuner']; 
  
const [car, truck, suv] = vehicles; 
  
console.log("Car is", car); 
console.log("Truck is", truck);

输出

Car is Swift
Truck is Blackhawk

对象解构与数组解构类似。假设你想要解构一个名为”gfg”的对象，可以像这样操作。

对象解构的示例：

let gfg ={ 
  fullName: "GeeksforGeeks", 
  type: "eduTech", 
  location: "Noida"
} 
  
let {fullName: CompanyName, location: cLocation}=gfg; 
console.log("company Name is " + CompanyName + " which is located in "+cLocation);

输出

company Name is GeeksforGeeks which is located in Noida

它减少了索引引用并增加了代码的重用性。在React.js中，当组件接收对象类型的props，并且我们需要获取特定数据时，通过解构赋值可以很容易地实现这一点。使用解构赋值不仅会使您的代码更具表达性和可读性，还可以添加多个功能，如简洁的语法和变量重命名。它将提高您处理React组件和高效提取数据的能力。

5. JavaScript中的数组方法

数组对象用于在单个变量名下存储多个项目，类似于其他编程语言。在JavaScript中，有一些内置函数可以应用于数组，称为数组方法。在学习React之前学习它非常有用，因为它可以增加您的效率和性能。其中一些包括：

map - 通过在每个数组元素上迭代调用函数，创建一个新的数组。

语法：

array.map(function(currentValue, index, arr), thisValue)

示例:

const array = [1, 2, 3, 4]; 
  
  
function func(num) { 
  return num + 1; 
} 
  
//create a new array with value of each element is increased to 1 
const newArr = array.map(func); 
  
console.log("Old array is: ", array); 
console.log("New array is: ", newArr);

输出

Old array is:  [ 1, 2, 3, 4 ]
New array is:  [ 2, 3, 4, 5 ]

过滤器 - 这个数组方法在迭代数组时，基于函数条件创建一个包含过滤元素的新数组。

array .filter( function(currentValue, index, arr), thisValue )

示例:

const salaries = [10500, 33000, 1600, 4000]; 
  
function checkSalary(salary) { 
  return salary >= 10000; 
} 
  
const resultArray = salaries.filter(checkSalary); 
console.log("Salaries greater than 10000 are: ", resultArray);

输出

Salaries greater than 10000 are:  [ 10500, 33000 ]

reduce - 通过在数组的每个元素上应用函数，返回一个单一的结果值。

语法:

array.reduce( function(total, currentValue, currentIndex, arr), initialValue )

示例：

let arr = [10, 20, 30, 40, 50, 60]; 
   
function sumofArray(sum, num) { 
    return sum + num; 
} 
function myGeeks(item) { 
    console.log(arr.reduce(sumofArray)); 
} 
myGeeks()

输出

6. JavaScript中的Rest和Spread操作符

Rest和Spread操作符都使用三个点（…）表示。但是它们的用例完全相反。rest操作符将个别元素组合成一个数组，而spread操作符将数组展开为个别元素。

Spread操作符的示例：

const aboutWork = ["help", "students"]; 
const aboutUs = ["GeeksforGeeks", ...aboutWork, "grow."]; 
  
console.log(aboutUs);

输出

[ 'GeeksforGeeks', 'help', 'students', 'grow.' ]

Rest操作符的示例：

function rest(...theArgs) { // it combines all the input in an array 
  console.log(theArgs.length); 
} 
  
rest(); // 0 
rest(5); // 1 
rest(5, 6, 7); // 3

输出

0
1
3

7. JavaScript中的回调函数

回调是在调用另一个函数时作为参数传递的函数。JavaScript允许我们使用这种令人惊叹的功能来处理异步操作和事件处理。React组件使用回调函数来在任何事件发生时执行操作。回调函数将帮助你理解高级主题，如Promises和async和await，这些用于处理异步任务。

示例：

// Define the callback function 
function callbackFunction() { 
  console.log("This is Callback function"); 
} 
  
// Use setTimeout to delay the execution of the callback function 
setTimeout(callbackFunction, 5000); // Delay execution for 2 seconds (2000 milliseconds) 
  
console.log("Hi, Geeks");

输出

Hi, Geeks
This is Callback function

8. JavaScript中的Promise

由于回调地狱和控制反转（IOC）问题，在JavaScript中我们使用Promise来处理异步任务，使得我们的应用程序更加可扩展。它用于错误处理，并且提高了代码的可靠性。它使用then()、catch()和finally()方法来链接一系列操作。它允许并行执行异步操作，从而提高性能，使我们的应用程序更加高效。它是实现高级异步功能如’async’和’await’的基础。

示例：

let myPromise = new Promise(function(myResolve, myReject) { 
// a new promise named myPromise is created 
  let x = "GeeksforGeeks"; 
  if (x == "GeeksforGeeks") { 
    myResolve("Yes it is GeeksforGeeks"); 
  } else { //if gives any error 
    myReject("Error"); 
  } 
}); 
  
myPromise.then( 
  function(value) {console.log("Your Code is working fine");}, 
  function(error) {console.log("Your Code is giving error");;} 
);

输出

Your Code is working fine

9. JavaScript中的闭包

闭包是JavaScript的一个特性，它允许内部函数访问其当前作用域以及它的词法父级作用域。它是JavaScript非常基础、基本但重要的概念。闭包具有封装、代码组织和记忆其词法父级作用域的特性。在React.js中，可以使用闭包实现封装在组件内部的逻辑，从而实现隐私保护。

示例:

function start() { 
  var content = "GeeksforGeeks"; // content is a local variable created by start() 
  function company() { 
    // company() is the inner function, that forms the closure 
    console.log(content); // using variable declared in the parent function 
  } 
  company(); 
} 
start();

输出

GeeksforGeeks

10. JavaScript中的异步/等待

JavaScript具有处理需要时间完成的操作（如网络请求和文件操作）的异步功能。在回调和 promises 之后，引入了 async 和 await，使得异步代码更易读和简单处理。

async 关键字用于声明一个将返回一个 promise 的异步函数。在函数内部，我们将使用 await 关键字来异步等待返回的 promise 的完成解决和拒绝。

示例：

async function getData() { 
  let promise = new Promise((resolve, reject) => { 
    setTimeout(() => { 
      resolve({ name: "GeeksforGeeks"}); 
    }, 200); 
  }); 
  
  let Data = await promise; 
  console.log(Data); 
} 
  
getData();

输出

{ name: 'GeeksforGeeks' }

11. JavaScript中的面向对象编程（类和函数）

OOP（面向对象编程）可以通过函数和类两种方式在JavaScript中实现。是的，在引入基于类的OOP之前，JS中已经实现了基于函数的OOP。

基于类的OOP： JavaScript在ECMAScript 2015（ES6）中引入了类语法，以提供更熟悉的OOP方法。在这种范式中，使用“class”关键字来定义类。

示例：

class Rectangle { 
  constructor(width, height) { 
    this.width = width; 
    this.height = height; 
  } 
  
  area() { 
    return this.width * this.height; 
  } 
  
  perimeter() { 
    return 2 * (this.width + this.height); 
  } 
} 
  
const rect = new Rectangle(5, 10); 
console.log(rect.area());        // Output: 50 
console.log(rect.perimeter());   // Output: 30

输出

50
30

在这个示例中，矩形类具有属性（宽度和高度）和方法（area()和perimeter()）。使用“new”关键字创建实例并调用它们的方法。

基于功能的面向对象编程 ：它是一种原型继承。在JavaScript引入类之前，它是实现面向对象编程的唯一方法。在这个范式中，通过定义函数并将方法附加到其原型上来创建对象。

示例：

function Rectangle(width, height) { 
  this.width = width; 
  this.height = height; 
} 
  
Rectangle.prototype.area = function() { 
  return this.width * this.height; 
} 
  
Rectangle.prototype.perimeter = function() { 
  return 2 * (this.width + this.height); 
} 
  
const rect = new Rectangle(5, 10); 
console.log(rect.area());        // Output: 50 
console.log(rect.perimeter());   // Output: 30

输出

50
30

在这里，构造函数是一个矩形函数，方法附加在它的原型上。要创建实例，使用new关键字，可以调用这些实例的方法。

12. JavaScript中的模块

编写Web应用程序时，非常重要的是维护代码并确保代码是组织良好的，并使用JavaScript模块。它将代码分解为单独的文件，使其组织良好且可重用。在学习React.js之前，了解JavaScript模块的工作方式非常重要，因为它有助于管理依赖项并导入外部库，包括React.js。

要正确学习JavaScript模块，您应该了解JavaScript中的 导入和导出 。导出可以以多种方式使用，以下是一种语法，在末尾我们导出模块的成员。

let variable="It is a Variable";
class GfG{
     constructor(name){
          this.gfg= "Welcome to " +name;
}
}
export {variable, GfG};

同样地，您可以使用“import”关键字将任何有用的模块导入到当前文件中。有多种导入文件成员的方式，其中之一就是导入完整的文件：

import * as syntax from 'syntax.js'
// use 'syntax.variable' to feth the value of variable;
// use 'syntax.GfG' to use GfG class;

有用资源

JavaScript教程
JavaScript速查表
React教程

结论

React是JavaScript的一个库，由于其易于使用和高生产力，被许多大型组织在全球范围内使用。React可以轻松地制作快速的用户界面，但是为此，您应该具备扎实的JavaScript知识。在本文中，我们讨论了在开始学习React.js之前应该了解的顶级JavaScript概念。因为熟悉JavaScript的知识将使得学习React的过程非常顺利和简单。基本的基础知识应该清楚，而JavaScript的工作方式，如调用堆栈和全局执行上下文，将激发您学习这一方面的兴趣。一些核心主题，如解构和使用promises、异步和等待来处理数据方面的知识，在React中将对您有很大帮助。这些是一些最常见的主题，您还可以随着学习的过程学习更多的概念。