在你学习React之前必备的JavaScript基础有哪些

这篇文章主要介绍“在你学习React之前必备的JavaScript基础有哪些”,在日常操作中,相信很多人在在你学习React之前必备的JavaScript基础有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”在你学习React之前必备的JavaScript基础有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

10年积累的成都网站设计、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有点军免费网站建设让你可以放心的选择与我们合作。

创建 React 应用程序的探索

开始学习 React 的常见情况是运行 create-react-app 包,它会设置运行 React 所需的一切。 该过程完成之后,打开 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 ,那么你可能认为这个 class 语句是 React 的一个特性。 实际上这是 ES6 的一个新特性,这就是为什么正确学习 ES6 可以让你更好地理解 React 代码。 我们将从 ES6 的类开始。

ES6 的类

ES6 引入了 class 语法,类似于 Java 或 Python 等 OO(面向对象) 语言。 ES6 中的基本类如下所示:

class Developer {    constructor(name){      this.name = name;    }    hello(){      return 'Hello World! I am ' + this.name + ' and I am a web developer';    }  }

class 语法后跟一个可用于创建新对象的标识符(或一个名称)。 始终在对象初始化中调用构造函数方法。 传递给这个对象的任何参数都将传递给新对象。 例如:

var nathan = new Developer('Nathan');  nathan.hello(); // Hello World! I am Nathan and I am a web developer

类可以定义任意它所需的方法,在这种情况下,我们定义了一个返回字符串的 hello 方法。

类继承

类可以扩展另一个类的定义,从该类初始化的新对象将具有这两个类的所有方法。

class ReactDeveloper extends Developer {    installReact(){      return 'installing React .. Done.';    }  }  var nathan = new ReactDeveloper('Nathan');  nathan.hello(); // Hello World! I am Nathan and I am a web developer  nathan.installReact(); // installing React .. Done.

继承另一个类的类,通常称为 child 类或 sub 类,而正在扩展的类称为 parent 类或 super 类。 子类也可以覆盖父类中定义的方法,这意味着它将使用自己定义的新方法来替换父类方法的定义。 例如,让我们覆盖 hello 函数:

class ReactDeveloper extends Developer {    installReact(){      return 'installing React .. Done.';    }   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 Component 类的定义。

import React, { Component } from 'react';  class App extends Component {    // class content    render(){      return (        

Hello React!

      )    }  }

这使得我们能够使用 render() 方法,JSX ,this.state 和其他方法。 所有这些定义都在Component 类中。 但正如我们稍后将看到的,class 不是定义 React Component 的唯一方法。 如果你不需要状态和其他生命周期方法,则可以使用函数。

使用 ES6 中的 let 和 const 来声明变量

因为 JavaScript 的 var 关键字是声明全局的变量,所以在 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 function  const testFunction = function() {    // content..  }  // arrow function  const testFunction = () => {    // content..  }

如果您是一位经验丰富的 JS 开发人员,那么从常规函数语法转换为箭头语法可能会让您感到不舒服。 当我学习箭头函数时,我用这两个简单的步骤来重写我的函数:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2.  移除 function 关键字

  3.  在 () 后面加上 =>

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

const testFunction = (firstName, lastName) => {    return firstName+' '+lastName;  }  const singleParam = firstName => {    return firstName;  }

隐藏的 return

如果箭头函数只有一行,则可以返回值而无需使用 return 关键字以及大括号。

const testFunction = () => 'hello there.';  testFunction();

在 React 中的使用

const HelloWorld = (props) => {    return 

{props.hello}

;  }

等同于 ES6 的类组件

class HelloWorld extends Component {    render() {      return (        

{props.hello}

;      );    }  }

在 React 应用程序中使用箭头功能可使代码更简洁。 但它也会从组件中删除状态的使用。 这种类型的组件称为无状态功能组件。 你会在许多 React 教程中看到这个名字。

解析数组和对象的赋值

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

const developer = {    firstName: 'Nathan',    lastName: 'Sebhastian',    developer: true,    age: 25,  }  //destructure developer object  const { firstName, lastName } = developer;  console.log(firstName); // returns 'Nathan'  console.log(lastName); // returns 'Sebhastian'  console.log(developer); // returns the object

如您所见,我们将开发人员对象中的 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}

;  }

Map 和 filter

虽然本文侧重于 ES6 ,但需要提及 JavaScript 数组 Map 和 filter 方法,因为它们可能是构建 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}
  • )          }        
      )    }  }

我们同样可以在 render 中筛选数据

        {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 语句:

import React, { Component } from 'react';

在***行代码中我们看到 export default 语句:

export default App;

要理解这些语句,我们先讨论模块语法。

模块只是一个 JavaScript 文件,它使用 export 关键字导出一个或多个值(可以是对象,函数或变量)。 首先,在 src 目录中创建一个名为 util.js 的新文件

touch util.js

然后我们在这里面写一个函数,使用一个默认导出

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 中引入它。

import { times, plusTwo } from './util.js';  console.log(times(2));  console.log(plusTwo(3));

每个模块可以有多个命名导出但只有一个默认导出。 可以导入默认导出,而无需使用花括号和相应的导出函数名称:

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

但是对于命名导出,必须使用花括号和确切名称导入。 或者,import可以使用别名来避免两个不同的导入具有相同的名称:

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

直接这样引入名称:

import React from 'react';

将使 JavaScript 检查node_modules 以获取相应的包名称。 因此,如果您要导入本地文件,请不要忘记使用正确的路径。

在 React 中使用

显然我们已经在 src / App.js 文件中看到了这个,然后在 index.js 文件中看到了导出的 App 组件的呈现方式。 我们暂时忽略 serviceWorker 部分。

//index.js file  import 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-PWA  serviceWorker.unregister();

请注意如何从 ./App 目录导入 App ,并省略了 .js 扩展名。 我们只能在导入 JavaScript 文件时省略文件扩展名,但在其他文件中我们必须包含扩展名,例如 .css 。 我们还导入另一个 node 模块 react-dom ,这使我们能够将 React 组件呈现为 HTML元素。

至于 PWA ,它是使 React 应用程序脱机工作的一项功能,但由于默认情况下它已被禁用,因此无需在开始时学习它。 在你有足够的信心构建 React 用户界面之后,学习 PWA 。

到此,关于“在你学习React之前必备的JavaScript基础有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


新闻名称:在你学习React之前必备的JavaScript基础有哪些
网页地址:http://myzitong.com/article/ghiojo.html

其他资讯