第一章:JavaScript复习
1.变量
{
var a=20
}
var a=20
function fn(){
var b=90
}
{
let b=190
}
for (var i = 0; i < 10; i++) {
console.log("在循环内部可以访问",i)
}
console.log("在循环外面访问",i)
const PI=3.14
console.log(PI*45.878)
const obj={
name:"孙悟空",
age:'12'
}
console.log(obj.name)
const fn1=function (x,y) {
return x+y
}
console.log(fn1(2,2));
console.log(typeof fn1())
2.解构赋值
let a,b;
let arr=['吴邪','张启山','解雨臣','张起灵','越想越','赵子龙']
a=arr[0]
b=arr[1]
console.log(a,b);
[a,b]=arr;
console.log(a,b)
const [x,y]=arr;
function fn(){
return ['吴邪','黑瞎子']
}
console.log(fn());
const [l,k,...c]=arr;
console.log(l,k,c)
const obj={
name:'吴邪',
age:19,
gender:'男'
};
let u,i,o;
u=obj.name;
i=obj.age;
o=obj.name;
console.log(u,i,o);
({name:u,age:i,gender: o}=obj)
console.log(u,i,o);
const {name,gender,age}=obj
console.log(name,age,gender);
let v=10;
let s=90;
[v,s]=[s,v];
console.log("交换后:",v,s)
3.展开
function f(a,b,c) {
return a+b+c;
}
const arr=[1,2,3];
let result=f(arr[0],arr[1],arr[2]);
console.log(result)
let result2=f(...arr);
console.log(result2);
const arr2=[...arr];
console.log(arr2);
const arr3=[12,3,4,5,6,...arr,23,45]
console.log("浅复制",arr3)
const obj={name:'吴邪',
age:19,
gender:'男'
};
const obj2={...obj};
console.log(obj2)
const obj3={...obj,address:'吴山居'}
console.log(obj3)
3.箭头函数
const fn=function (a){
return 'hello 计算机科学与技术'
};
const fn2=a=>'hello 计算机科学与技术学院';
console.log(fn(),fn2())
const sum=(a,b)=>a+b;
let v=sum(123,456)
console.log(v)
const j=()=>console.log("计算机科学与技术")
console.log(j());
4.箭头函数的区别
function f() {
console.log(arguments.length);
}
console.log(f(1,2,3))
const fn2=()=>{
console.log(arguments);
}
const fn3=(...a)=>{
console.log(a)
}
console.log(fn3())
const obj={
hello:fn=()=>{
console.log(this)
}
}
obj.hello();
const obj2={
hello:function () {
const test=()=>{
console.log(this)
};
test();
}
}
obj2.hello()
5.模块化
const c=10;
const b=100;
import a from './1.变量.js'
console.log(a)
export const k=200;
6.类
class Person{
name='吴邪';
age=10;
gender='男'
run(){
console.log("跑起来!")
}
constructor(name,age) {
console.log("我执行了~~")
this.name=name;
this.age=age
}
}
const prson=new Person();
console.log(prson);
console.log(prson.age);
console.log(prson.run());
const p2=new Person('解雨臣',18)
console.log(p2);
7.类的this
class Myclass{
fn(){
console.log(this)
}
}
const a=new Myclass();
const test=a.fn();
8.类的继承
class Dog{
constructor(name,age) {
this.name=name;
this.age=age;
}
sayhello=()=>{
console.log("汪汪汪")
}
}
class Snake{
constructor(name,age) {
this.name=name;
this.age=age;
}
sayHello=()=>{
console.log("你好")
}
}
class y extends Dog{
constructor(name,age,legngth) {
super(name,age);
this.length=legngth
}
sayHello=()=>{
console.log("那好 我是继承的子类")
}
}
const c=new y('吴邪',19);
console.log(c.name)
console.log(c.sayHello());
9.静态属性和方法
class Myclass{
name='计算机科学与技术'
fn=()=>{
console.log("你好 计算机科学与技术学院")
}
}
const x=new Myclass();
console.log(x.fn())
class Myclass2{
static name='计算机科学与技术 静态属性'
static fn=()=>{
console.log("我是静态方法")
}
}
Myclass2.fn()
10.数组方法复习
const arr=[1,2,3,4,5,6];
let result=arr.map((item,index,array)=>item+1)
console.log(result);
const arr2=['吴邪','解雨臣','黑瞎子'];
let result2=arr2.map(item=>"<item>+item+</item>")
console.log(result2)
let result3=arr.filter(item=>item%2===0);
console.log(result3)
let result4=arr.reduce((prev,curr)=>{prev+curr},0);
console.log(result4)
第二章:React概述
1.React介绍
React是一个用于构建用户界面的JavaScript库 用来为现代的网络构建用户界面
React的特点:
--虚拟DOM
--声明式
--支持服务器端渲染
--快速 简单 易学
---基于组件
2.HelloWord
1.使用React开发web项目:
---1.引入React文件 下载完成后继续下一步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWord</title>
<script>
/* --1.React
*
*
* */
</script>
<div id="root"></div>
<!-- 1.引入React的核心库-->
<script src="3.React教程/React/react.development.js"></script>
<!-- 2.引入react的DOM库-->
<script src="3.React教程/React/react-dom.development.js"></script>
</head>
<body>
<script>
<!-- 通过React向页面中添加一个div-->
const div=React.createElement('div',{},'我是react的div');//创建一个React元素
/*
* React.createElement()来创建一个React元素
* ---参数
* 1.元素名(组件名)
* 2.元素中的属性
* 3.元素的子元素(内容)
* */
//获取根元素对应的React元素
const root= ReactDOM.createRoot(document.getElementById('root'));//用来创建根元素 需要一个DOM元素作为参数
//将div渲染到根元素中
root.render(div)
</script>
<!--<script>-->
<!--<!– 操作DOM–>-->
<!--// 通过DOM向网页中添加一个div-->
<!--const div=document.createElement('div')-->
<!--//向div中设置内容-->
<!--div.innerText='我是计算机科学与技术'-->
<!--//获取root-->
<!--const root=document.getElementById('root')-->
<!--//将div添加到页面中-->
<!--root.appendChild(div)-->
<!--</script>-->
</body>
</html>
3.三个API之一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.引入react核心库-->
<script src="react.development.js"></script>
<!-- 2.引入react的dom库-->
<script src="react-dom.development.js"></script>
</head>
<body>
<!--3.创建一个根标签-->
<div id="root"></div>
<script>
<!-- 创建一个React元素-->
const button=React.createElement('button',{id:btn,onClick:()=>{
alert("你好 计算机科学与技术")
}},'确定');
//获取根元素
const root=ReactDOM.createRoot(document.getElementById('root'));
//将元素在根元素里面渲染
root.render(button)//这个读作把button放在root里面渲染
/*
* React.createElement('button',{},'确定')
* ---用来创建一个React元素
* 参数:
* 参数1.元素的名称(html标签必须小写)
* 参数2.标签中的属性 指定id 类型 类选择器
* ----在设置事件的时候 要采用驼峰命名法
* ---class属性需要使用className来设置
* 参数3:元素的内容(子元素)
* 注意点:React元素最终会通过虚拟don转换为真实的DOM元素
* React元素一旦创建就无法修改
* 只能使用新创建的元素去进行转换
*
*
*
* */
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.引入React核心库-->
<script src="react.development.js"></script>
<!-- 2.引入React的DOM库-->
<script src="react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
<!-- 1.创建React根元素 div-->
const div=React.createElement('div',{},'我是一个div',button)
//2.获取根元素 传递一个根元素 根元素就是React元素要插入的位置
const root=ReactDOM.createRoot(document.getElementById('root'))
//3.将元素放在根元素中显示 render()通过根元素去调用 用来将React元素渲染到根元素中 根元素中所有的内容都会被删除 被React元素替换
// ----当重复调用render()时 React会将两次渲染结果进行比较
// ----他会只修改那些发生变化的元素 对DOM做最少的修改
root.render(div)
</script>
</body>
</html>
4.jsx介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSX</title>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<!-- 引入babel 以创建jsx-->
<script src="babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- 设置js代码能被babel识别-->
<script type="text/babel">
<!-- 创建一个React元素-->
//命令式编程:
// const button=React.createElement('button',{},'我是计算机科学与技术学院');
// 声明式编程:结果导向的编程 在React中可以通过jsx来创建React元素 jsx就是js的扩展 jsx需要翻译为js代码 才能React执行
//要在React中使用jsx中 必须在React中引入babel
const button= <button >我是按钮</button>
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(button)
//jsx就是React.createElement()的语法糖 jsx在执行之前都会被babel转换为js代码
</script>
</body>
</html>
5.jsx的注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSX的注意事项</title>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<!-- 引入babel 以创建jsx-->
<script src="babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- 设置js代码能被babel识别-->
<script type="text/babel">
/* 1.jsx的注意事项:
* ---1.jsx不是字符串 不要加引号
* ----2.jsx中标签的应该小写开头 React的组件用大写开头
* ---3.jsx中可以使用大括号{}来嵌入表达式 --有返回值的语句急速表达式
* ---4.jsx中只能有一个根标签
* ---5.jsx的标签必须正确结束 自结束标签也是这样
*
* 6.如果表达式是null 布尔值 undefined这些值 就不会显示
* 7.在jsx中 属性可以直接在标签中设置
* 注意:class需要使用className代替
* style中必须使用对象设置
* */
const name='吴邪';
const fn=()=>{
return "hello 计算机科学技术学院!"
}
//通过花括号啦表现出变量值
const div=<div
style={{backgroundColor:"yellowgreen"}}
>我是一个div <hr/> {name} <hr/> {9+1} <hr/>
{fn()}</div>;
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(div)
</script>
</body>
</html>
6.渲染列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渲染列表</title>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<!-- 引入babel 以创建jsx-->
<script src="babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const name='吴邪'
/* {}只能用来放js表达式 而不能放语句 if for语句不能放入
* 在语句中是可以去操作jsx
* <ul>
*
* <li><>/li
* <li></li>
* ....
* </>ul>
*
*
* */
const arr=['吴邪','解雨臣','二月红','黎簇','王胖子','黑瞎子']
//将arr渲染为一个列表在网页中显示 jsx中自动将数组中的元素在页面中显示
const list=<div>
<li>{arr[0]}</li> <hr/>
<li>{arr[1]}</li> <hr/>
<li>{arr[2]}</li> <hr/>
</div>
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(list)
</script>
</body>
</html>
7.虚拟DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>虚拟DOM</title>
<!-- 1.分别引入三个包-->
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="root"> </div>
<script type="text/babel">
<!-- 创建一个数据-->
const data=['吴邪','解雨臣','黑瞎子','王胖子']
//创建列表
const list=<ul>
{data.map(item=><li>{item}</li>)}
</ul>
// 获取根元素
const root=ReactDOM.createRoot(document.getElementById('root'));
//渲染元素
root.render(list)
/*
* 在React我们操作的元素被称为React元素 并不是真正的原生dom元素
* React通过虚拟DOM 将React元素和原生DOM进行映射 虽然操作的React元素 但是这些操作最终都会通过虚拟DOM
* 在真实DOM上显示出来
* 虚拟DOM的好处 --1.降低API复杂度
* ---2.解决兼容问题
* ---3.提高了性能 减少DOM不必要的操作
*
* 每当我们调用root.render()时 页面是会发生重新的渲染
* React会通过diff算法 将新的元素和旧的元素进行比较 并且只对发生变化的元素进行修改 没有发生变化的元素不予处理
*
* 在比较两次数据时 React会先比较父元素 父元素如果不同 追所有元素全部替换
* 父元素一致 在去逐个比较子元素 直到找到所有发生变化的元素为止
*
* 当我们在jsx中显示数组时 数组中的每一个元素都需要设置唯一的key 否则控制台会显示红色警告
* 重新渲染页面时 React会按照顺序依次比较对应的元素 当我们去渲染一个列表时 默认情况下 我们不去指定这个key
* 同样也会按照顺序进行比较
*
* 如果列表的顺序永远不会发生变化 这么做当然不会有问题 都是如果列表的顺序会发生变化 这个可能会导致性能问题
*
* 上例中:在列表的最后添加了一个新元素 并没有改变其他元素的顺序 所以这种操作不会带来性能问题
*
* 为了解决这个问题:React为列表设计了一个key属性
* key的作用相对于ID 只是无法在页面中查看 当设置key以后在比较元素 就会比较相同key的元素 而不是按照顺序进行比较
*
*
* 在渲染一个列表时 通常会给列表项设置唯一一个key 来避免上述问题 这个key在当前列表中唯一即可
*
* 注意:开发过程中 一般会采用数据的id作为key 尽量不要使用元素的索引作为key
* 索引会跟着元素的顺序的改变而改变 所以使用索引作为key根没有key是一样的
* 唯一不同就是警告没有了
*
* 当元素的顺序不会变 时 用索引作为key也没有声明问题
*
* */
</script>
</body>
</html>
第三章:React项目创建
1.手动创建React项目
创建项目:目录结构如下:
public
---index.html(添加标签 <div id="root"></div>)
--src
-App.js
-index.js
步骤:进入项目所在目录:
项目初始化 终端执行:npm init -y (yarn init -y)
安装项目依赖:npm add react react-dom react-scripts
或者 npm install react react-dom react-scripts
// src/index.js是js的入口文件
//1.引入ReactDOM
import ReactDOM from 'react-dom/client';
//2.创建一个jsx
const App=<div>
<h1>这个是react项目</h1>
<h2>计算机科学与技术学院</h2>
</div>;
// 3.获取根容器
const root=ReactDOM.createRoot(document.getElementById('root'));
//4.将App渲染到根容器
root.render(App)
//4.打包 终端输入:npx react-scripts build 或者 npx react-scripts start (推荐)
2.定义练习结构
在创建好文件夹之后:
终端输入:npm init -y
完成项目的初始化
之后在输入 npm add react react-dom react-scripts
完成项目的依赖配置
import ReactDOM from 'react-dom/client';
//创建一个React元素
const App=<div className="logs">Hello 计算机科学与技术学院
{/* 日志项的容器*/}
<div className="item">
{/* 日期的容器*/}
<div className="date">
<div className="month">四月
</div>
<div className="day">19日
</div>
</div>
{/* 日志的内容*/}
<div className="centent">
<h2 className="desc">学习React</h2>
<div className="time">40分钟</div>
</div>
</div>
</div>
//获取根元素
const root=ReactDOM.createRoot(document.getElementById('root'));
//渲染元素
root.render(App)
3.编写学习的样式
import ReactDOM from 'react-dom/client';
//引入样式表
import './index.css'
//创建一个React元素
const App=<div className="logs">
{/* 日志项的容器*/}
<div className="item">
{/* 日期的容器*/}
<div className="date">
<div className="month">四月
</div>
<div className="day">19日
</div>
</div>
{/* 日志的内容*/}
<div className="content">
<h2 className="desc">学习React</h2>
<div className="time">40分钟</div>
</div>
</div>
{/* 日志项的容器*/}
<div className="item">
{/* 日期的容器*/}
<div className="date">
<div className="month">四月
</div>
<div className="day">19日
</div>
</div>
{/* 日志的内容*/}
<div className="content">
<h2 className="desc">学习React</h2>
<div className="time">40分钟</div>
</div>
</div>
</div>
//获取根元素
const root=ReactDOM.createRoot(document.getElementById('root'));
//渲染元素
root.render(App)
body{
background-color: #DFDFDF;
margin: 0;
}
*{
box-sizing: border-box;
}
.logs{
width: 800px;
background-color: #EAE2B7;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.item{
display: flex;
margin: 16px 0;
background-color: #FCBF49;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
padding: 6px;
}
.date{
width: 90px;
background-color: #ffffff;
border-radius: 10px;
font-weight: bold;
text-align: center;
overflow: hidden;
}
.month{
height: 30px;
background-color: #D62828;
line-height: 30px;
color: #ffffff;
font-size: 20px;
}
.day{
height: 60px;
line-height: 60px ;
font-size: 50px;
}
.content{
flex: auto;
text-align: center;
font-weight: bold;
}
.desc{
font-size: 16px;
color: #194B49;
}
.time{
color: #D62828;
}
4.组件介绍
在React中网页被拆分为了一个一个的组件 组件是独立和可复用的代码片段 具体来说组件可能是网页中的一个按钮
一个对话框 一个提出层等等 React中的组件可以是基于函数 基于类的组件
import ReactDOM from 'react-dom/client';
/* 组件:react中组件有两种创建方式
--函数式组件:函数组件就是一个或返回jsx的普通函数
--组件的首字母必须是大写
--类组件:
*
* */
function App(){
return <div>Hello React</div>
}
const root=ReactDOM.createRoot(document.getElementById('root'))
//React组件可以直接通过jsx去渲染
root.render(<App/>)
const App=()=>{
return <div>我是App组件!</div>
}
//导出App
export default App;
import ReactDOM from 'react-dom/client';
/* 组件:react中组件有两种创建方式
--函数式组件:函数组件就是一个或返回jsx的普通函数
--组件的首字母必须是大写
--类组件:
*
* */
//导入App组件
import App from './App'
const root=ReactDOM.createRoot(document.getElementById('root'))
//React组件可以直接通过jsx去渲染
root.render(<App/>)
5.类组件
/*
const App=()=>{
return <div>我是App组件!</div>
}
*/
//类组件: 定义好累组件之后 必须继承React里面的组件 React.Component
class App extends React.Component{
// 类组件中必须 添加一个render()方法 且方法的返回值要是一个jsx方法
render() {
return <div>我是类组价</div>
}
}
//导出App
export default App;
import ReactDOM from 'react-dom/client';
/*
* 类组件:
* 相较于函数组件 类组件的编写要麻烦一点
*
* */
//导入App组件
import App from './App'
const root=ReactDOM.createRoot(document.getElementById('root'))
//React组件可以直接通过jsx去渲染
root.render(<App/>)
6.使用组件来修改练习
1.MyDate组件
import React from 'react';
import './MyDate.css'
const MyDate = () => {
return (
<div>
{/* 日期的容器*/}
<div className="date">
<div className="month">四月
</div>
<div className="day">19日
</div>
</div>
</div>
);
};
export default MyDate;
MyDate样式
.date{
width: 90px;
background-color: #ffffff;
border-radius: 10px;
font-weight: bold;
text-align: center;
overflow: hidden;
}
.month{
height: 30px;
background-color: #D62828;
line-height: 30px;
color: #ffffff;
font-size: 20px;
}
.day{
height: 60px;
line-height: 60px ;
font-size: 50px;
}
2.LogItem组件
/*
*
* */
import React from 'react';
import MyDate from "./Date/MyDate";
import './LogItem.css'
const LogItem = () => {
return (
<div className="item">
<MyDate/>
{/* 日志项的容器*/}
<div className="item">
{/* 日志的内容*/}
<div className="content">
<h2 className="desc">学习React</h2>
<div className="time">40分钟</div>
</div>
</div>
</div>
);
};
export default LogItem;
LogItem样式
.item{
display: flex;
margin: 16px 0;
background-color: #FCBF49;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
padding: 6px;
}
.content{
flex: auto;
text-align: center;
font-weight: bold;
}
.desc{
font-size: 16px;
color: #194B49;
}
.time{
color: #D62828;
}
3.Logs组件
/*
* 日志的一个容器
* */
import LogItem from "./LogItem/LogItem";
import './Logs.css'
const Logs=()=>{
return <div className="Logs">
{/* 在Logs里面引入LogItem 这两个组件是包含关系*/}
<LogItem/>
<LogItem/>
</div>
}
export default Logs;
Logs组件样式
.Logs{
width: 800px;
background-color: #EAE2B7;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
4.程序主入口文件
import ReactDOM from 'react-dom/client';
import App from './App'
import './index.css'
const root=ReactDOM.createRoot(document.getElementById('root'))
//React组件可以直接通过jsx去渲染
root.render(<App/>)
程序主入口样式
body{
background-color: #DFDFDF;
margin: 0;
}
*{
box-sizing: border-box;
}
5.App组件
import Logs from "./Components/Logs/Logs";
const App=()=>{
return <div>
<Logs/>
</div>
}
export default App;
7.事件
第27节课