五、React(环境配置和ES6语法糖)

五、React(环境配置和ES6语法糖),第1张

文章目录 一、React是什么?二、React能用来做什么?三、配置环境四、ES6语法糖总结


一、React是什么?

React 是一个开源 JavaScript 库,用于专门为单页应用程序构建用户界面。它用于处理 Web 和移动应用程序的视图层,允许我们创建可重用的 UI 组件。

二、React能用来做什么?

React 非常灵活。你学会了React,你就可以在各种各样的平台上使用它来构建高质量的用户界面。React 是一个库,而不是一个框架。它的库方法使 React 发展成为如此出色的工具。

上面说了一大串官方术语,说白了react就是js的一个库,它可以快速帮助我们开发网站和app,react有几个特点,第一点,它可以在JS的基础上支持XML,这种编程语言在react中被称为JSX,JSX听着花里胡哨,其实它本质就是JS,他在运行时react是先把JSX用bundle翻译成JS,再来运行。第二点就是react里面含有丰富的组件了,react组件的出现极大的提升开发效率,组件就相当于把前端三剑客整体拆解,成为一个个的小功能。

三、配置环境

React官网


安装Git Bash
安装地址


安装Nodejs
安装地址


安装create-react-app
打开Git Bash,执行:
npm i -g create-react-app


安装VSCode的插件
Simple React Snippets
Prettier - Code formatter


创建React App
在目标目录下打开Git Bash,在终端中执行:

create-react-app react-app # 可以替换为其他app名称

cd react-app
npm start  # 启动应用

JSX
React中的一种语言,会被Babel编译成标准JavaScript。

四、ES6语法糖

使用bind()函数绑定this取值
在JavaScript中,函数里的this指向的是执行时的调用者,而非定义时所在的对象。

例如:

const person = {
  name: "lyy",
  talk: function() {
    console.log(this);
  }
}

person.talk();

const talk = person.talk;
talk();   // 等于window.talk();

运行结果:

{name: 'lyy', talk: ƒ}
Window

bind()函数,可以绑定this的取值。例如:

const talk = person.talk.bind(person);

箭头函数的简写方式

const f = (x) => {
  return x * x;
};

可以简写为: const f = x => x * x;

箭头函数不重新绑定this的取值
例如:

const person = {
  talk: function() {
    setTimeout(function() {
      console.log(this);
    }, 1000);
  }
};

person.talk();  // 输出Window
const person = {
  talk: function() {
    setTimeout(() => {
      console.log(this);
    }, 1000);
  }
};

person.talk();  // 输出 {talk: f}

对象的解构
例如:


const person = {
  name:"lyy",
  age:18,
  height:180
};

const {name : new_name,age} = person;   //new_name 重新命名的别名
console.log(new_name,age);

数组和对象的展开
例如:

let a = [1, 2, 3];
let b = [...a];  // b是a的复制
let c = [...a, 4, 5, 6];
const a = {name: "lyy"};
const b = {age: 18};
const c = {...a, ...b, height: 180};

Named 与 Default exports
Named Export:可以export多个,import的时候需要加大括号,名称需要匹配
Default Export:最多export一个,import的时候不需要加大括号,可以直接定义别名

总结

本文介绍了React基础内容,学习React框架不建议一下子学很多内容,可以先把大致内容框架学好,了解全局脉络后来学习其它内容会更快。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1295508.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存