React学习笔记汇总_part1
React学习笔记汇总
- React18视频教程（讲师：李立超）学习笔记
-
- 1.变量的声明
- 2.解构赋值
- 3.展开
- 4.箭头函数的语法
- 5.箭头函数的特点
- 7.类
- 8.类的this
- 9.类的继承
- 10.静态属性和方法
- 11.数组方法补充
- 12.React简介
- 13.HelloWorld
- 14.三个API之一
- 15.三个API之二
- 16.JSX简介
- 17.JSX的注意
- 18.渲染列表
- 19.虚拟DOM
- 20.手动创建React项目
- 21.运行React项目
- 22.定义练习的结构&编写样式
- 24.组件简介
- 25.类组件
- 26.事件
- 28.props简介
- 29.设置日期
- 30.修改Logs组件
- 32.State简介
- 33.State注意事项
- 34.DOM对象和useRef()
- 35.类组件
- 36.添加Card组件
- 38.获取表单数据
- 39.双向绑定
- 40.存储到一个state
- 41.完成添加的处理
- 42.完成删除的处理
- 43.空列表显示
- 48.使用create-react-app
- 49.内联样式和样式表
- 50.CSS_Module
- 51.Fragment
- 53.项目准备
- 56.引入FontAwesome
- 59.Context的使用
- 60.使用Context修改练习
- 62.完成搜索
- 63.处理字体大小问题
- 66完成Backdrop
- 67.setState()的执行流程（函数组件）
- 68.useEffect
- 69.useEffect的清理函数
- 源码下载
-
- 1.React18视频教程（讲师：李立超）学习笔记源码
本人主要从事Java，仅对react进行学习与了解，前端水平一般，如有错误之处，请指定，视频学习过程的笔记，方便自己查阅，也希望对你有帮助。
声明：以下笔记内容均摘自老师的讲课视频，仅供学习使用
React18视频教程（讲师：李立超）学习笔记
以下为React视频教程学习笔记，写此笔记目的为通过学习与手敲一遍老师的笔记，加深印象，也方便查阅。
视频地址：React18视频教程（讲师：李立超）React视频教程
1.变量的声明
var、let、constant三种声明方式
三种声明方式中，第一优先使用的是const,如果希望变量被改变则使用let，至于var能不用就不用，最好不要在代码中出现。
var：没有块级作用域
let：有块级作用域
const：和let类似，具有块级作用域，但是它只能赋值一次
const使用场景：对于一些常量可以使用const声明，对于一些对象（函数）也可以使用const声明，这样可以避免对象（函数）被意外修改
示例
{
let a = 10;
}
// console.log(a);
for(let i=0; i<5; i++){
console.log('循环内部-->', i);
}
// console.log('循环外部-->', i);
(function (){
if(false){
var b = 33;
}
})();
if(false){
let b = 33;
}
// console.log(b);
const c = 44;
// c = 'hello';
const PI = 3.14;
// console.log(c);
const obj = {name:'孙悟空'};
obj.age = 18;
const fn = function (){
};
console.log(obj.age);
2.解构赋值
通过解构赋值，可以将数组中的元素，对象中的属性赋值给其他的变量
元素解构赋值示例
let arr = ['孙悟空', '猪八戒'];
[a, b] = arr;
const [a, b] = arr;
#函数的返回值是数组，也可以解构赋值
function fn() {
return ['沙和尚', '唐僧'];
}
const [a, b] = fn();
arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];
// const [a, b, ,c] = arr; // 可以跳过元素
// const [a, b, ...c ] = arr; // ...变量，会接收后边所有的元素
// console.log('a='+a, 'b='+b, 'c='+c);
const obj = {
name: '孙悟空',
age: 18,
gender: '男'
};
let a, b, c;
// ({name:a, age:b, gender:c} = obj); // 将name赋值给a，age赋值给b，gender赋值给c
const {name, gender, age} = obj; // 如果变量名和属性名一致，则可以只写一个
// console.log(a, b, c);
// console.log(name, age, gender);
// 利用数组的解构来交换两个变量的位置
a = 10;
b = 20;
[a, b] = [b, a]; // 交换变量a和b的位置
arr = [1, 3, 2];
[arr[1], arr[2]] = [arr[2], arr[1]]; // 交换数组中两个元素的位置
// console.log('a =', a);
// console.log('b =', b);
console.log(arr);
3.展开
可以通过 ... 展开一个数组
function fn(a, b, c) {
return a + b + c;
}
const arr = [1, 2, 3];
// 计算数组中三个数字的和
let result = fn(...arr);
// console.log(result);
// const arr2 = [...arr]; // 相当于将arr浅复制给arr2
const arr2 = [7, 8, 9, ...arr, 4, 5, 6];
// console.log(arr2);
const obj = {
name: '孙悟空',
age: 18,
gender: '男'
};
// const obj2 = {...obj}; // 将obj在新的对象中展开，相当于浅复制
const obj2 = {address: '花果山', ...obj, name: '猪八戒',};
console.log(obj2);
4.箭头函数的语法
/*
* 箭头函数
* - 只有一个参数的函数
* 参数 => 返回值
* - 如果没有参数，或多个参数，参数需要使用()括起来
* () => 返回值
* (a, b, c) => 返回值
* - 箭头后边的值就是函数的返回值
* - 返回值必须是一个表达式（有值的语句）
* - 如果返回值是对象，必须加()
* - 如果需要在箭头函数中定义逻辑，可以直接在箭头后跟一个代码块，
* 代码块中语法和普通函数没有区别
* */
示例：
const fn = function (a){
return 'hello';
};
const fn2 = a => a+'hello';
const fn3 = (a, b) => a+'hello';
// console.log(fn2(123));
const sum = (a, b) => a + b;
let result = sum(123, 456);
const fn4 = (a, b) => {
if(a === 10){
a += 5;
}else if(a === 20){
a += 10;
}
return a + b;
};
result = fn4(10, 5);
console.log(result);
5.箭头函数的特点
/*
* 1.箭头函数中没有arguments
* 2.箭头函数中没有自己的this
* - 它的this总是外层作用域的this
* 3.箭头函数中的this无法通过call()、apply()、bind()修改
* 4.箭头函数无法作为构造函数使用
*
* */
示例：
function fn(a, b, ...args){
// arguments用来保存函数的实参
// console.log(arguments.length);
console.log(args);
}
const fn2 = (...args)=>{
console.log(args);
};
const fn3 = () => {
console.log(this);
};
const obj = {
hello:()=>{
console.log(this);
}
};
const obj2 = {
hello:function (){
const test = () => {
console.log('-->',this);
};
test();
}
};
obj2.hello();
// new fn3();
7.类
/*
* 类
* - 类是对象的模板
* - 类决定了一个对象中有哪些属性和方法
* - 使用class关键字来定义一个类
* */
示例：
class Person{
// 可以直接在类中定义属性
// name = '孙悟空';
// age = 18;
// 构造函数
// 当我们通过new创建对象时，实际上就是在调用类的构造函数
constructor(name, age) {
// 将参数赋值给对象中的属性
// 在构造函数中，可以通过this来引用当前的对象
// 在构造函数中定义属性
this.name = name;
this.age = age;
}
// 定义实例方法
run(){
console.log('我会跑！');
}
}
const per = new Person('孙悟空', 18);
const per2 = new Person('猪八戒', 28);
//
console.log(per);
console.log(per2);
// console.log(per === per2);
//
// per.run();
8.类的this
/*
* 类中的所有代码都会在严格模式下执行
* 严格模式下其中一个特点就是，函数的this不在是window，而是undefined
*
* 注意：
* 在类中方法的this不是固定的
* 以方法形式调用时，this就是当前的实例
* 以函数形式调用，this是undefined
* 在开发时，在有些场景下，我们希望方法中的this是固定的，不会因调用方式不同而改变
* 如果遇到上述需求，可以使用箭头函数来定义类中的方法
* 如果类中的方法是以箭头函数定义的，则方法中的this恒为当前实例，不会改变
*
* */
示例
class MyClass{
constructor() {
//this.fn = this.fn.bind(this); //将fn方法的this绑定为当前实例
}
fn(){
console.log('-->',this);
}
// fn = () => {
// console.log('-->',this);
// };
}
const mc = new MyClass();
const test = mc.fn;
mc.fn(); // mc
test(); // undefined
const fn2 = function (){
console.log(this);
};
// fn2();
9.类的继承
// 通过继承可以使得类中拥有其他类中的属性和方法
// 使用extends来继承一个类，继承后就相当于将该类的代码复制到了当前类中
// 当我们使用继承后，被继承的类就称为父类，继承父类的类 称为子类
// 将多个类中的重复代码提取出来
class Animal{
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello = () => {
console.log('动物在叫');
};
}
class Dog extends Animal{
/*
* 子类继承父类后，将获得父类中所有的属性和方法，
* 也可以创建同名的属性或方法来对父类进行重写
* */
sayHello = () => {
console.log('汪汪汪！');
};
}
class Snake extends Animal{
// 当在子类中重写父类构造函数时，必须在子类构造函数中第一时间调用父类构造函数，否则会报错
constructor(name, age, len) {
super(name, age); // 调用父类构造函数
this.len = len;
}
sayHello = () => {
console.log('嘶嘶嘶~~');
};
}
const dog = new Dog('旺财', 5);
const snake = new Snake('长虫', 4, 10);
// console.log(dog.name, dog.age);
console.log(snake.name, snake.age, snake.len);
// dog.sayHello();
snake.sayHello();
10.静态属性和方法
/*
* 直接通过类调用的属性和方法被称为静态属性和静态方法
* */
class MyClass {
// 使用static开头的属性是静态属性，方法是静态方法
static name = '哈哈';
static fn = () => {
// 注意：静态方法this不是实例对象而是当前的类对象
console.log(this);
};
}
console.log(MyClass.name);
MyClass.fn();
11.数组方法补充
/*
* map()
* - 可以根据原有数组返回一个新数组
* - 需要一个回调函数作为参数，回调函数的返回值会成为新数组中的元素
* - 回调函数中有三个参数：
* 第一个参数：当前元素
* 第二个参数：当前元素的索引
* 第三个参数：当前数组
*
* filter()
* - 可以从一个数组中获得符和条件的元素
* - 会根据回调函数的结果来决定是否保留元素，true保留，false不保留
*
* find()
* - 可以从一个数组中获得符和条件的第一个元素
*
* reduce()
* - 可以用来合并数组中的元素
* - 需要两个参数：
* 回调函数（指定运算规则）
* 四个参数：
* prev 上一次运算结果
* curr 当前值
* index 当前索引
* arr 当前数组
* 初始值
* - 用来指定第一次运算时prev，如果不指定则直接从第二个元素开始计算
* */
示例
const arr = [1, 2, 3, 4, 5];
let result = arr.map((item) => {
return item + 2;
});
result = arr.map((item, index, array) => {
return item + 2;
});
// console.log(result);
const arr2 = ['孙悟空', '猪八戒', '沙和尚'];
/*
* 孙悟空
* 猪八戒
* 沙和尚
* */
result = arr2.map(item => "" + item + "");
result = arr.filter(item => item % 2 === 0);
result = arr.find(item => item % 2 === 0);
result = arr.reduce((prev, curr, index) => {
console.log(index, prev, curr);
return prev + curr
},0);
console.log(result);
12.React简介
React是一个用于构建用户界面的
Javascript库，起源于Facebook
，2013年开源。React还有React Native框架，通过它可以直接使用Javascript编写原生应用。
React特点：
虚拟DOM
声明式
基于组件
支持服务器端渲染
快速、简单、易学
13.HelloWorld
通过使用引入外部js的 方式来使用，需要引入
react.development.js和react-dom.development.js
react.development.js
react是react核心库，只要使用react就必须要引入
下载地址：https://unpkg.com/[email protected]/umd/react.development.js
react-dom.development.js
react-dom 是react的dom包，使用react开发web应用时必须引入
下载地址：https://unpkg.com/[email protected]/umd/react-dom.development.js
注：有可能上面的两个下载地址由于网络原因下载不了，可以直接移动到最后的源码文件里面下载，效果一样。
HelloWorld.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<!--引入react的核心库-->
<script src="script/react.development.js"></script>
<!--引入react的DOM库-->
<script src="script/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
/*
* React就是用来代替DOM的
* */
// 通过DOM向页面中添加一个div
// 创建一个div
// const div = document.createElement('div'); // 创建一个dom元素
// // 向div中设置内容
// div.innerText = '我是一个div';
// // 获取root
// const root = document.getElementById('root');
// // 将div添加到页面中
// root.appendChild(div);
// 通过React向页面中添加一个div
/*
* React.createElement()
* - 用来创建一个React元素
* - 参数：
* 1. 元素名（组件名）
* 2. 元素中的属性
* 3. 元素的子元素（内容）
* */
const div = React.createElement('div', {}, '我是React创建的div'); // 创建一个React元素
// 获取根元素对应的React元素
// ReactDOM.createRoot() 用来创建React根元素，需要一个DOM元素作为参数
const root = ReactDOM.createRoot(document.getElementById('root'));
// 将div渲染到根元素中
root.render(div);
</script>
</body>
</html>
14.三个API之一
/*
* React.createElement()
* - 用来创建一个React元素
* - 参数：
* 1.元素的名称（html标签必须小写）
* 2.标签中的属性
* - class属性需要使用className来设置
* - 在设置事件时，属性名需要修改为驼峰命名法
* 3.元素的内容（子元素）
* - 注意点：
* React元素最终会通过虚拟DOM转换为真实的DOM元素
* React元素一旦创建就无法修改，只能通过新创建的元素进行替换
* */
示例：
// 创建一个React元素
const button = React.createElement('button', {
type: 'button',
className: 'hello',
onClick: () => {
alert('你点我干嘛')
}
}, '点我一下');
// 创建第一个div
const div = React.createElement('div', {}, '我是一个div', button);
// 获取根元素，根元素就是React元素要插入的位置
const root = ReactDOM.createRoot(document.getElementById('root'));
// 将元素在根元素中显示
root.render(div);
// 获取按钮对象
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=>{
// 点击按钮后，修改div中button的文字为click me
const button = React.createElement('button', {
type: 'button',
className: 'hello',
onClick: () => {
alert('你点我干嘛');
}
}, 'click me');
// 创建一个div
const div = React.createElement('div', {}, '我是一个div', button);
// 修改React元素后，必须重新对根元素进行渲染
// 当调用render渲染页面时，React会自动比较两次渲染的元素，只在真实DOM中更新发生变化的部分
// 没发生变化的保持不变
root.render(div);
});
15.三个API之二
// 将元素在根元素中显示
/*
* root.render()
* - 用来将React元素渲染到根元素中
* - 根元素中所有的内容都会被删除，被React元素所替换
* - 当重复调用render()时，React会将两次的渲染结果进行比较，
* 它会确保只修改那些发生变化的元素，对DOM做最少的修改
* */
16.JSX简介
解析jsx需要引入
babel
，
另外需要设置script标签属性