一、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。
使用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框架不建议一下子学很多内容,可以先把大致内容框架学好,了解全局脉络后来学习其它内容会更快。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)