2021 年学习 React 的所需要的 JavaScript 基础-白红宇

2021 年学习 React 的所需要的 JavaScript 基础

阅读量：436 次

发布时间：2019-03-06

本文共 8568 字，大约阅读时间需要 28 分钟。

在理想的情况中，您可以先了解所有有关 JavaScript 和 web 开发的知识，然后再深入了解React。但是，我们没有办法这样，如果等你把所有 JavaScript 的知识都掌握了再去学习 React，就会浪费很多时间。如果您已经有一些使用 JavaScript 的经验，那么在学习 React 之前您需要学习的只是能够实际应用于开发 React 应用程序的 JavaScript 知识。那些掌握下面这些 JavaScript 知识点，就足够你去学习 React。

的类

声明变量 let/const

箭头函数

解构赋值

模块系统

您将在 80% 的时间内使用 20% 的 JavaScript功能，因此在本教程中，我将帮助您学习所有这些功能。

探索 Create React App 脚手架

在开始学习 React 之前我们都用 create-react-app 这个脚手架来创建 React 应用，它具有运行 React 的一切基础套件。

npx create-react-app my-appcd my-appnpm start

然后，在该过程完成后，打开 src/app.js 文件，将向我们展示整个应用程序中唯一的 React 类:

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';class App extends Component {  render() {    return (      
           
              
               
                 Edit src/App.js and save to reload.          
          
                 Learn React                  
    
      
   
    );  }}export default App;

如果你以前从未学过 ES6，你会认为这个类语句是 React 的一个特性。

这实际上是 ES6 的一个新功能，这就是为什么正确学习 ES6 可以让你更好地理解 React 代码。

我们将从 ES6 课程开始：

ES6 类

ES6 引入了类语法，其使用方式与面向对象语言类似，如 Java 或 python，ES6中的基础类如下所示:

class Developer {  // 构造函数，创建新对象时(new)，调用  // name 是参数，可以根据需要，定义多个参数  constructor(name){    this.name = name;  }  // 方法  hello(){    return 'Hello World! I am ' + this.name + ' and I am a web developer';  }}

class 后面跟着类的名称，这个类（有点像模板）可以用于创建一个新的对象。这个 constructor 就是构造函数，当用这个类创建一个新的对象时就会用这个方法。传递到该构造函数的任何参数都将传递到新对象。

例如:

// Nathan 会传给 constructor 方法，最终 this.name 等于 Nathanvar nathan = new Developer('Nathan');nathan.hello(); // Hello World! I am Nathan and I am a web developer

一个类可以根据需要定义尽可能多的方法，在这种情况下，我们有返回字符串的 hello 方法。

类继承

一个类可以继承另一个类，并且从该类初始化的新对象将具有两个类的所有方法。

// ReactDeveloper 继承了 Developer 这个类class ReactDeveloper extends Developer {  installReact(){    return 'installing React .. Done.';  }}// 用子类生成了新对象var nathan = new ReactDeveloper('Nathan');// 子类对象 nathan 将具有子类与父类的所有方法nathan.hello(); // Hello World! I am Nathan and I am a web developernathan.installReact(); // installing React .. Done.

继承另一个类的类通常称为子类，被继承的类称为父类或超类。

子类还可以覆盖父类中定义的方法，这意味着它将用定义的新方法替换父类方法。

例如，让我们覆盖 hello 函数:

class ReactDeveloper extends Developer {  installReact(){    return 'installing React .. Done.';  }	// Developer 类也有 hello 方法，这里直接重写覆盖  hello(){    return 'Hello World! I am ' + this.name + ' and I am a REACT developer';  }}var nathan = new ReactDeveloper('Nathan');// 这里调用的将是子类覆盖后的方法nathan.hello(); // Hello World! I am Nathan and I am a REACT developer

这样，Developer 类中的 hello 方法已被覆盖。

在 React 中使用

现在我们了解了ES6类和继承，我们可以了解 src/app.js 中定义的 React 类. 这是一个 React 组件，但它实际上只是一个普通的 ES6 类，继承了从 react 这个库里导入的 React 组件类。

// 从 react 库导入 React 组件类，还有 Component 类import React, { Component } from 'react';// 我们自己定义的组件继承 上面导入的 Component 类class App extends Component {  // class content  render(){    return (      Hello React!
    )  }}

因为我们自己定义的 App 组件继承自从 react 库中导入 Component 类，所以我们也具有 Component 类的一些方法，比如 render() 方法，还有 this.state 这些属性。但是后面你可能会看到，类并不是我们唯一定义组件的方式，如果你不需要 state（一种状态数据）, 还有组件的生命周期方法，你可以用函数来代替类的。

使用 ES6 let 和 const 声明变量

以前都是用 var 关键字在 JavaScript 中声明变量，ES6 中引入了两个新的变量声明：即 let 和 const。它们都是相同的，用于声明变量。不同之处在于，const 不能在声明后更改其值，而 let 可以。两个声明都是本地的，这意味着如果您在函数范围内声明 let，则不能在函数外部调用它。

const name = "David";let age = 28;var occupation = "Software Engineer";

使用哪一个？

经验法则是默认情况下使用 const 声明变量。稍后，当您编写应用程序时，您将意识到 const 的值需要更改，那个时候你应该想着把 const 重构成 let。您应该去习惯使用 const 或 let。

我们什么时候在 React 中使用它？

每次我们需要变量的时候，看看以下示例:

import React, { Component } from 'react';class App extends Component {  // class content  render(){		// 在这里使用变理    const greeting = 'Welcome to React';    return (      {greeting}
    )  }}

由于 greeting 在整个应用程序生命周期中不会改变，我们在这里使用 const 定义它。

箭头函数

箭头函数是一个新的 ES6 特性，在现代代码库中几乎被广泛使用，因为它保持代码简洁和可读。

此语法允许我们使用更短的语法编写函数：

// regular functionconst testFunction = function() {  // content..}// arrow functionconst testFunction = () => {  // content..}

如果你是一个有经验的 JS 开发人员，从一个常规函数语法转到箭头语法一开始可能会不舒服。

当我学习箭头函数时，我使用了这两个简单的步骤来重写我的函数:

删除 function 关键字

在 () 之后添加箭头符号 =>

括号仍然用于传递参数，如果只有一个参数，则可以省略括号。

// 两个参数const testFunction = (firstName, lastName) => {  return firstName+' '+lastName;}// 一个参数时可以省略括号const singleParam = firstName => {  return firstName;}

隐式返回

如果您的箭头函数只有一行，您可以直接返回值，而不必使用 return 关键字和花括号 {}

// 直接返回，不用写 {} 和 returnconst testFunction = () => 'hello there.';testFunction();

在 React 中使用

创建 React 组件的另一种方法是使用箭头函数。

React 组件箭头函数写法:

const HelloWorld = (props) => {  return {props.hello}
;}

相当于 ES6 类组件

class HelloWorld extends Component {  render() {    return (      {props.hello}
;    );  }}

在您的 React 应用程序中使用箭头函数使代码更加简洁, 因为它也将从组件中删除 state 的使用。

这种类型的组件被称为无状态功能组件。

你会在许多 React 教程中找到这个名字。

数组和对象的解构分配

ES6中引入的最有用的新语法之一，解构赋值就是简单地复制对象或数组的一部分，并将它们放入命名变量中。

一个简单的例子:

const developer = {  firstName: 'Nathan',  lastName: 'Sebhastian',  developer: true,  age: 25,}//destructure developer object// 从 developer 对象中取出数据的简单写法const { firstName, lastName } = developer;console.log(firstName); // returns 'Nathan'console.log(lastName); // returns 'Sebhastian'console.log(developer); // returns the object

如您所见，我们将 developer 对象的 firstName 和 lastName 分配给了新变量 firstName 和 lastName.

现在，如果您想将 firstName 换成名为 name 的新变量，怎么办？

// : 后面加变量别名const { firstName: name } = developer;console.log(name); // returns 'Nathan'

解构也适用于数组，只有它使用索引而不是对象键:

const numbers = [1,2,3,4,5];const [one, two] = numbers; // one = 1, two = 2

您能够用 , 将某些键跳过：

const [one, two, , four] = numbers; // one = 1, two = 2, four = 4

在 React 中使用

主要用 state 数据的解构，例子：

reactFunction = () => {  const { name, email } = this.state;};

或者在无状态组件中:

const HelloWorld = (props) => {  return {props.hello}
;}

我们可以简单地立即解构参数:

const HelloWorld = ({ hello }) => {  return {hello}
;}

解构数组用于 React 的 useState Hook:

const [user, setUser] = useState('');

Map 和 filter

尽管本教程侧重于 ES6，但需要提及 JavaScript 数组映射和过滤器方法，因为它们可能是构建 React 应用程序时最常用的 ES5 功能之一，尤其是处理数据。

这两种方法更多地用于处理数据。例如，假设从远程API 获取结果返回 JSON 数据数组:

const users = [  { name: 'Nathan', age: 25 },  { name: 'Jack', age: 30 },  { name: 'Joe', age: 28 },];

然后，我们可以在 React 中呈现项目列表，如下所示:

import React, { Component } from 'react';class App extends Component {  // class content  render(){    const users = [      { name: 'Nathan', age: 25 },      { name: 'Jack', age: 30 },      { name: 'Joe', age: 28 },    ];    return (      
   
            {users          .map(user => 
    {user.name}
)        }      
   
    )  }}

我们还可以过滤渲染中的数据。


   
      {users    .filter(user => user.age > 26)    .map(user => 
    {user.name}
)  }

ES6 模块系统

ES6 模块系统使 JavaScript 能够导入和导出文件。

为了解释这一点，让我们再次看看 src/app.js 代码。

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';class App extends Component {  render() {    return (      
           
              
               
                 Edit src/App.js and save to reload.          
          
                 Learn React                  
    
      
   
    );  }}export default App;

在代码的第一行，我们看到了导入语句:

import React, { Component } from 'react';

在最后一行，我们看到了导出默认 (export default) 语句:

为了理解这些语句，让我们先讨论一下模块语法。

模块只是一个 JavaScript 文件，它使用 export 关键字导出一个或多个值 (可以是对象、函数或变量)。

首先，在 src 目录中创建一个名为 util.js 的新文件

然后在里面写一个函数，这是默认导出（export default）

export default function times(x) {  return x * x;}

或多个命名导出

export function times(x) {  return x * x;}export function plusTwo(number) {  return number + 2;}

然后我们可以从 src/App.js 导入它

// 从 util.js 文件中导入import { times, plusTwo } from './util.js';console.log(times(2));console.log(plusTwo(3));

每个模块可以有多个命名导出，但只有一个默认导出。

可以导入默认导出，而无需使用花括号和相应的导出函数名称:

// in util.jsexport default function times(x) {  return x * x;}// in app.jsimport k from './util.js';console.log(k(4)); // returns 16

但是对于命名导出，您必须使用花括号和确切名称进行导入。

或者，导入可以使用别名来避免对两个不同的导入使用相同的名称:

// in util.jsexport function times(x) {  return x * x;}export function plusTwo(number) {  return number + 2;}// in app.jsimport { times as multiplication, plusTwo as plus2 } from './util.js';

从绝对名称导入，如:

import React from 'react';

将对根目录下的 node_modules 目录进行 JavaScript 检查以获取相应的包名称。

因此，如果要导入本地文件，请不要忘记使用正确的路径。

在 React 中使用

很明显，我们在 index.js 中看到导入了 App 组件：

//index.js fileimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';ReactDOM.render(
   , document.getElementById('root'));// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: http://bit.ly/CRA-PWAserviceWorker.unregister();

请注意：从 .js 扩展名导入时，可以忽略扩展名的输写。

import App from './App';

总结

React 最大的好处是它不会像其他 web 框架一样在 JavaScript 之上添加任何外部抽象层,这就是为什么React在JS开发人员中变得非常受欢迎，它只是使用最好的 JavaScript 使构建用户界面更容易和可维护。在一个 React 应用程序中，一旦你掌握好上面所讲的 JavaScript 知识，你就可以自信地编写 React 应用，并成为一个优秀的程序员。

翻译自：Nathan Sebhastian

原文：

转载地址：http://tiouz.baihongyu.com/

你可能感兴趣的文章