React 是一个流行的 Javascript 库，用于构建现实世界的应用程序。要成为一名熟练的 React 开发人员，了解一些基本的 Javascript 概念非常重要。对于许多人来说，学习 React 似乎很困难，但理解这些基本概念可以简化学习过程。
在本文中，我将介绍每个开发人员在开始 React 之前应该了解的 15 个基本概念。每个概念都通过示例进行解释，以显示其重要性。
如果您刚刚开始使用 React 或者即将探索该库，那么这篇文章适合您。
1.回调函数
函数是任何程序的构建块，允许多次调用代码而无需重复。
一种类型的函数是回调函数。
如果您希望用户在显示任何信息之前单击浏览器中的箭头，或者希望在从 API 获取数据后立即执行某些代码，您可以利用回调的功能。
回调函数在函数或事件发生后执行其任务，并允许控制函数的执行。
它是一个作为参数传递给另一个函数的函数，用于指定异步操作或事件完成后应该发生的情况。
// The callback function
function showText() {
console.log('The written text should show after 2 seconds.');
}
function showAfterDelay(callback, delay) {
setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);
2.箭头函数
ES6 中引入了箭头函数，可以让函数语法编写得更加简洁。箭头函数因其简洁而在React中被广泛使用。
const showText = () => {
console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);
3.Array.Map() 方法
在 React 中通常不鼓励改变现有数组，因为这可能会导致不必要的错误和性能问题。因此，开发人员采用数组方法。函数式数组方法不会改变原始数组，而是从现有数组返回一个新数组。
函数式数组方法之一是 Array.map() 方法。
Array.map() 方法循环遍历现有数组并返回具有相同长度的新数组。可以对新数组进行更改，而不会对现有数组产生任何影响。
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
4.Array.Filter() 方法
Array.filter() 方法以一种有趣且合乎逻辑的方式工作。这些方法可用于根据 true 或 false 条件过滤掉数组中的某些元素。
当一条语句为假时，它会自动被过滤掉；当它为真时，它会保留它，使其成为从数组中删除不需要的元素的合适方法。
// The callback function
function showText() {
console.log('The written text should show after 2 seconds.');
}
function showAfterDelay(callback, delay) {
setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);
5.Array.reduce() 方法
顾名思义，array.reduce() 方法将整个数组减少为单个值。这是对数组元素求和或分组的最佳方法之一。
const showText = () => {
console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);
6.模板文字
模板文字允许字符串包含Javascript变量或任何JavaScript表达式。
它提供了一种在 JavaScript 中使用反引号和带有大括号 ${}.
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
7.三元运算符
三元运算符是条件运算符，提供了一种简单而简洁的方式来编写 if..else 语句。
React 不直接支持 if..else 语句，因为它不适合 React 中存在的名为 JSX 的语法表达式。
JSX 是 JavaScript 的语法扩展，允许将 Javascript、CSS 和 React 组件嵌入到 HTML 中。
React 语法更多地被认为是一个表达式而不是一个语句，并且三元作为它合适的运算符。
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
8.短路和逻辑运算符
逻辑运算符用于将多个条件组合成一个表达式。 JavaScript 中存在的主要逻辑运算符有：
短路是逻辑运算符中发生的一种行为，在特定条件下，不会计算第二个操作数，因为整个表达式的结果只能由第一个操作数确定。
和（&&）
或 (||)
// The callback function
function showText() {
console.log('The written text should show after 2 seconds.');
}
function showAfterDelay(callback, delay) {
setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);
9.RestSpread 运算符
在实例中，当您想要向现有数组添加新属性或合并一组现有数组时，扩展运算符是首选运算符。
扩展运算符 (...) 由 3 个点表示，将数组扩展为单个元素，并在数组的开头使用。它用于：
const showText = () => {
console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
const BookNumbers = [1, 2, 3, 4]; const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15
剩余运算符(...) 也用 3 个点表示，但写在数组的末尾。它用于从解构对象/数组中收集多个属性。
Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `
10.可选链
可选链接以简单的方式处理 null 或未定义的值。它用于访问链中看似为空或未定义的属性或任何中间属性。它将自动被短路并呈现为未定义。理想情况下，如果没有可选链，它会返回错误。
在某些情况下，您不确定对象中是否存在所有值，请考虑使用可选链接，因为它是一种提供空值和未定义值检查的语法。
const BookNumbers = 4; const result = (BookNumbers % 2 === 0) ? "Even" : "Odd"; console.log(result); // Output: "Even"
11.解构数组
当必须从数组中同时调用多个属性时，代码可能会变得很麻烦。通过解构，可以防止这种情况。
解构允许将数组中的值组装成不同的变量。
解构可用于
在开始 React 之前不应该忽视的一个基本概念是解构。
const idVerify = true; const displayMessage = idVerify && "Identified"; console.log(displayMessage); // Output: "Identified"
12.使用不可变数组
数组可以在 JavaScript 中发生变化，这意味着可以在数组中添加、删除或更新属性。
然而，在 React 中，不变性通常是首选，以保持状态完整性并确保 React 可以检测到更改。要在 React 中使用不可变数组，通常使用映射、过滤器和展开运算符等方法来添加、删除和更新数组中的项目，而无需改变原始数组。
// The callback function
function showText() {
console.log('The written text should show after 2 seconds.');
}
function showAfterDelay(callback, delay) {
setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);
const showText = () => {
console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);
Const BookNumbers = [1,2,3,4]; Const DoubleNumbers = BookNumbers.map((book)=> book *2); Console.log(DoubleNumbers); //Output BookNumbers= [2,4,6,8]
13.异步/等待函数
异步 JavaScript 控制需要时间才能完成的任务的执行方式。 JavaScript 是一种同步语言，即在单个线程中一个接一个地运行代码。
在从数据库获取数据的情况下，在获取完成之前可能需要加载一些代码。
通过异步功能，无需等待操作完成即可执行代码，从而提高用户体验和整体性能。
在 React 中，您将经常使用应用程序编程接口 (API)，因此，深入了解此功能的工作原理非常重要。
Const BookNumbers = [1,2,3,4]; Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 ); Console.log(FilteredNumbers); // Output 1,3
14.承诺
Promises 是指表示异步操作最终完成或失败的内置对象。
Promise 存在于以下三种状态之一：
Promise 在 JavaScript 中扮演着重要的角色，这使得它成为一个需要学习的重要概念。它使您能够编写更清晰的代码、系统地处理错误并提高整体性能。
15.使用 try.catch.finally 处理错误
有时在数据获取过程中会弹出错误，让您思考如何查找或修复这些错误。
通过使用关键字，可以以更结构化的方式处理数据获取。
Try..catch..finally 块是 JavaScript 中强大的错误处理结构，无论是否发生错误，它都可以成功处理潜在错误并执行特定代码。
查找代码中的某些错误可能会很耗时。通过利用这些块，事情变得很容易。
const BookNumbers = [1, 2, 3, 4]; const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15
深入了解上面解释的基本 JavaScript 概念将简化学习过程，并引导您成为一名熟练的 React 开发人员。如果您还没有学习这些概念，请努力学习。欢迎在评论区分享你的建议！
以上是开始 React 之前需要学习的基本 JavaScript 概念的详细内容。更多信息请关注PHP中文网其他相关文章！
