react学习笔记——复习模块

已于 2023-07-11 23:28:04 修改
阅读量237 收藏
点赞数 1
分类专栏： react 文章标签： react
于 2023-07-11 23:21:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39056803/article/details/131671166
版权

前言：最近开始学习react，之前学习vue没有把笔记整理的特别好，非常后悔，感觉学了等于没学，这次要好好整理啊！本次学习参考教程为B站，张天禹老师的react全家桶。

文章目录

类的基本知识

创建一个类

  • 定义一个Person类，然后实例化一个这个类的对象p1，并对这个对象进行输出后，查看控制台。代码如下：
// 创建一个person类
class Person {

}
// 创建一个person的实例对象
const p1 = new Person();
console.log(p1);
  • 控制台打印效果如下。
    • 注意，这里输出的不是这个类，而是这个类的实例对象。
    • 前面的Person是为了区分这个对象是由哪个类new出来的。

在这里插入图片描述

类的构造方法和一般方法

  • 给Person类添加构造方法和一般方法，并调用一般方法。代码如下：
// 创建一个person类
class Person {
    // 构造器方法（函数）
    constructor(name, age) {
        // 构造器中的this是谁？——是类的实例对象，例如下面的p1和p2
        this.name = name;
        this.age = age;
    }
    // 一般方法（除了构造器以外的方法）
    speak() {
        // 一般方法（speak方法）放在了哪（通过打印p1是看不到speak的）？——放在了这个类的原型对象上，需要展开Prototype才能看到
        // 一般方法（speak方法）是给谁用的？——放在原型对象上的方法是给实例对象用的
        // 通过person实例调用speak时，speak中的this就是实例对象
        // 注意原型链查找规则：当读取自身不存在的属性或方法，则按照原型链进行查找。
        console.log(`我叫${this.name}，我的年龄是${this.age}`);
    }
}
// 创建一个person的实例对象
const p1 = new Person('tom', 18);
console.log(p1);
p1.speak();
p1.speak.call({ a: 1, b: 2 });
  • 控制台打印效果如下。
    • 注意，构造方法中的this是实例对象，例如代码中的p1和p2。而一般方法通过实例调用时，方法中的this才是实例对象。因为可以通过一般方法.call()等方法来更改函数中的this指向，例如p1.speak.call({a:1,b:2})，这时候，speak中的this指向的是{a:1,b:2}对象。
    • 方法并没有在类中展示出来，而是Person这个类的原型对象上，供实例使用。
    • 原型链的查找规则：当读取自身不存在的属性或方法，则按照原型链进行查找。

在这里插入图片描述

类的继承

  • 创建一个Student类，继承Person类，这时候Student中就有了name、age等属性以及speak方法。因为继承了Person。
  • Student类需要一个年级的属性，因此需要重新写一个Student的构造器。这时候必须要调用父类的构造器（如果定义了一个类并进行了继承，并且子类需要写构造器，则子类构造器必须调用父类的构造器。并且父类构造器要放在最上面）。
  • 学生也可以进行speak，并且调用的是父类的speak，并且speak方法是在父类的原型对象上，这里需要一层一层的网上找，也就是原型链。
// 创建一个person类
class Person {
    // 构造器方法（函数）
    constructor(name, age) {
        // 构造器中的this是谁？——是类的实例对象，例如下面的p1和p2
        this.name = name;
        this.age = age;
    }
    // 一般方法（除了构造器以外的方法）
    speak() {
        // 一般方法（speak方法）放在了哪（通过打印p1是看不到speak的）？——放在了这个类的原型对象上，需要展开Prototype才能看到
        // 一般方法（speak方法）是给谁用的？——放在原型对象上的方法是给实例对象用的
        // 通过person实例调用speak时，speak中的this就是实例对象
        // 注意原型链查找规则：当读取自身不存在的属性或方法，则按照原型链进行查找。
        console.log(`我叫${this.name}，我的年龄是${this.age}`);
    }
}
// 创建一个person的实例对象
const p1 = new Person('tom', 18);
console.log(p1);
p1.speak();
p1.speak.call({ a: 1, b: 2 });
// --------------------------------
// 创建一个Student类，继承Person类
class Student extends Person {
    constructor(name, age, grade) {
        // 什么时候需要调用父类构造器？——如果定义了一个类并进行了继承，并且子类需要写构造器，则子类构造器必须调用父类的构造器。并且父类构造器要放在最上面
        super(name, age);// 调用父类构造器
        this.grade = grade;
    }
}

const s1 = new Student("张三", 15, '高一');
console.log(s1);
// 这里注意，speak方法是在父类的原型对象上，这里需要一层一层的网上找，也就是原型链
s1.speak();
  • 控制台输出效果如下：

在这里插入图片描述

  • 学生还需要再说出自己的年级，则需要重写父类的方法，此时Student原型对象上就有speak方法了，根据原型链查找规则，找到了就不继续找了。代码如下：
// 创建一个person类
class Person {
    // 构造器方法（函数）
    constructor(name, age) {
        // 构造器中的this是谁？——是类的实例对象，例如下面的p1和p2
        this.name = name;
        this.age = age;
    }
    // 一般方法（除了构造器以外的方法）
    speak() {
        // 一般方法（speak方法）放在了哪（通过打印p1是看不到speak的）？——放在了这个类的原型对象上，需要展开Prototype才能看到
        // 一般方法（speak方法）是给谁用的？——放在原型对象上的方法是给实例对象用的
        // 通过person实例调用speak时，speak中的this就是实例对象
        // 注意原型链查找规则：当读取自身不存在的属性或方法，则按照原型链进行查找。
        console.log(`我叫${this.name}，我的年龄是${this.age}`);
    }
}
// 创建一个person的实例对象
const p1 = new Person('tom', 18);
console.log(p1);
p1.speak();
p1.speak.call({ a: 1, b: 2 });
// --------------------------------
// 创建一个Student类，继承Person类
class Student extends Person {
    constructor(name, age, grade) {
        // 什么时候需要调用父类构造器？——如果定义了一个类并进行了继承，并且子类需要写构造器，则子类构造器必须调用父类的构造器。并且父类构造器要放在最上面
        super(name, age);// 调用父类构造器
        this.grade = grade;
    }
    // 重写父类继承的方法，此时Student原型对象上就有speak方法了，根据原型链查找规则，找到了就不继续找了
    speak() {
        console.log(`我叫${this.name}，我的年龄是${this.age}，我读的年级是${this.grade}`);
    }
}

const s1 = new Student("张三", 15, '高一');
console.log(s1);
// 这里注意，speak方法是在父类的原型对象上，这里需要一层一层的网上找，也就是原型链
s1.speak();
  • 控制台打印效果如下：

在这里插入图片描述

  • 学生还需要一个自己独有的方法，注意此方法的位置，以及方法中的this，代码如下：
// 创建一个person类
class Person {
    // 构造器方法（函数）
    constructor(name, age) {
        // 构造器中的this是谁？——是类的实例对象，例如下面的p1和p2
        this.name = name;
        this.age = age;
    }
    // 一般方法（除了构造器以外的方法）
    speak() {
        // 一般方法（speak方法）放在了哪（通过打印p1是看不到speak的）？——放在了这个类的原型对象上，需要展开Prototype才能看到
        // 一般方法（speak方法）是给谁用的？——放在原型对象上的方法是给实例对象用的
        // 通过person实例调用speak时，speak中的this就是实例对象
        // 注意原型链查找规则：当读取自身不存在的属性或方法，则按照原型链进行查找。
        console.log(`我叫${this.name}，我的年龄是${this.age}`);
    }
}
// 创建一个person的实例对象
const p1 = new Person('tom', 18);
console.log(p1);
p1.speak();
p1.speak.call({ a: 1, b: 2 });
// --------------------------------
// 创建一个Student类，继承Person类
class Student extends Person {
    constructor(name, age, grade) {
        // 什么时候需要调用父类构造器？——如果定义了一个类并进行了继承，并且子类需要写构造器，则子类构造器必须调用父类的构造器。并且父类构造器要放在最上面
        super(name, age);// 调用父类构造器
        this.grade = grade;
    }
    // 重写父类继承的方法，此时Student原型对象上就有speak方法了，根据原型链查找规则，找到了就不继续找了
    speak() {
        console.log(`我叫${this.name}，我的年龄是${this.age}，我读的年级是${this.grade}`);
    }
    study() {
        // speak放在了类的原型对象上，供实例使用
        // 通过student实例调用study时，study中的this就是实例对象
        console.log("我很努力的学习");
    }
}

const s1 = new Student("张三", 15, '高一');
console.log(s1);
// 这里注意，speak方法是在父类的原型对象上，这里需要一层一层的网上找，也就是原型链
s1.speak();
s1.study();
  • 控制台输出效果如下：

在这里插入图片描述

总结

  1. 类中的构造器不是必须要写的，要对实例进行一些初始化的操作时才要写。例如添加指定属性。
  2. 如果A类继承B类，并且A类中有构造器，则A类中的构造器必须调用super方法。
  3. 类中所有定义的方法，都是放在了类的原型对象上，供类的实例对象使用。

原生事件绑定

  • 原生事件的绑定方式
    1. 拿到元素后，添加监听事件
    2. 拿到元素后，给元素添加点击事件
    3. 直接给元素添加点击事件，执行对应的js语句
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_原生事件绑定</title>
</head>

<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button onclick="demo()">按钮3</button>
    <script>
        // 方式1：拿到元素以后，添加事件监听器
        const btn1 = document.getElementById("btn1");
        btn1.addEventListener('click', () => {
            alert("按钮1被点击了")
        })

        // 方式2：直接对元素添加点击事件
        const btn2 = document.getElementById("btn2");
        btn2.onclick = () => {
            alert("按钮2被点击了")
        }

        // 方式3：当点击的时候，执行demo()这个js语句
        function demo() {
            alert("按钮3被点击了")
        }
    </script>

</body>

</html>

类中方法的this指向

  • 只有使用实例调用方法的时候，this才是实例对象本身
  • 通过将方法重新赋值给变量，然后变量调用的方式，this是undefined，原因如下。
    • 因为其实给x的是一个方法（特殊的属性），然后x加括号则是直接调用。因此不是实例对象调用的，所以不会是实例对象本身。
    • 内存结构图分析：
      • 其实方法在堆内存中，然后栈中可以通过p1进行引用，但是赋值以后，栈中多了一个x的引用，x会直接引用堆内存，而不走实例对象进行引用
    • 直接调用那么this应该是window，而这里为什么不是window，而是undefined。
      • 因为类中所有的定义的方法，在方法的局部都开启了严格模式，因此this不会指向window。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_类中方法的this指向</title>
</head>

<body>
    <script>
        class Person {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            speak() {
                // speak方法放在哪？——类的原型对象上，供实例使用
                // 通过Person实例调用speak时，speak中的this就是Person实例
                console.log(this);
            }
        }
        const p1 = new Person("tom", 18);
        p1.speak();// 通过实例调用speak方法
        const x = p1.speak;
        x();// 这种方式，speak中的this就是undefined了
        /**
         * 为什么赋值给x的形式无法让speak中的this输出实例对象？
         *      因为其实给x的是一个方法（特殊的属性），然后x加括号则是直接调用。
         *      内存结构图分析：
         *          其实方法在堆内存中，然后栈中可以通过p1进行引用，但是赋值以后，栈中多了一个x的引用，x会直接引用堆内存，而不走实例对象进行引用
         * 为什么输出的是undefined？
         *      类中所有的定义的方法，在方法的局部都开启了严格模式，因此this不会指向window。
        */
    </script>
</body>

</html>

类中的属性

  • 如果初始化的属性，是需要通过传递过来的，则就需要构造器
  • 如果不是外部传递进来的，则可以直接通过赋值的形式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04_类中的属性</title>
</head>

<body>
    <script>
        class Car {
            // 如果初始化的属性，是需要通过传递过来的，则就需要构造器
            constructor(name, price) {
                this.name = name
                this.price = price
            }
            // 如果不是外部传递进来的，则可以通过如下形式
            // 往实例自身上追加一个属性，名为wheel，值为4，这样所有的实例都会有wheel属性
            wheel = 4
        }
        const c1 = new Car('奔驰c63', 199);
        console.log(c1);
    </script>
</body>

</html>

展开运算符

  • 展开运算符也就是“…”。其主要用法包含以下4种
    1. 将数组展开进行输出，其实输出的是多个数，而不是一个数组
    2. 连接两个数组
    3. 函数传参，批量传递多个参数
    4. 进行对象复制，注意这里是深度复制
    5. 复制对象，同时修改属性，或者新增属性。其实就是合并两个对象，冲突的话以后面的为准
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_展开运算符</title>
</head>

<body>
    <script>
        let arr1 = [1, 3, 5, 7, 9];
        let arr2 = [2, 4, 6, 8, 10];
        // 1. 将数组展开进行输出，其实输出的是多个数，而不是一个数组
        console.log(...arr1);

        // 2.连接两个数组
        let arr3 = [...arr1, ...arr2];
        console.log(arr3);

        // 3. 函数传参，批量传递多个参数
        function sum(...numbers) {
            // 计算数组中所有数值的和，可以使用数组身上的reduce方法，reduce中有两个参数，一个是之前的值，一个是当前的元素的值。注意这个之前的值，指的是之前的计算结果。
            return numbers.reduce((preValue, currentValue) => {
                return preValue + currentValue
            })
        }
        console.log(sum(1, 2, 3));

        // 4. 进行对象复制，注意这里是深度复制
        let person = { name: "tom", age: "18" }
        // console.log(...person); // 展开运算符号不能展开一个对象
        let person2 = { ...person }// 因为这里加了一个花括号，就是复制对象了
        person.name = "jerry";
        console.log(person);
        console.log(person2);

        // 5. 复制对象，同时修改属性，或者新增属性。其实就是合并两个对象，冲突的话以后面的为准
        let person3 = { ...person, name: "张三", address: "南京" }
        console.log(person3);
    </script>
</body>

</html>

对象相关知识

  • 需求：对象中添加一个key，并且这个key是从一个变量中拿的。
  • 代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06_对象相关知识</title>
</head>

<body>
    <script>
        let a = 'name';
        let obj = {}
        // 要求obj变成:{name:'tom'}，而这里的name是变量a中的内容
        // 实现代码如下：
        obj[a] = 'tom';// 这里就需要用到方括号
        console.log(obj);
    </script>
</body>

</html>
玄昌盛不会编程
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React复习二
smallsnine的博客
02-20 208
JSX 防止注入攻击 你可以安全地在 JSX 当中插入用户输入内容： const title = response.potentiallyMaliciousInput; // 直接使用是安全的： const element = <h1>{title}</h1>; React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明...
react pro——————————
04-14
react pro——————————
React复习
Young的博客
02-20 462
一、什么是Fiber 可以从两个方面来理解： 1.Fiber是一个任务单元 在React16之前，整个virtual dom 树以及diff过程是一个大的任务，这样就会导致主线程被长时间占用，造成线程阻塞。 React16将虚拟dom拆分一个个小的任务，在浏览器空闲时执行，每次执行完任务单元之后就会去检测有没有高级任务，如果有高级任务就执行高级任务，没有就继续执行Fiber任务。 2.Fiber是一个数据结构 可以将Fiber看做增强版的虚拟dom，Fiber对象描述了节点与节点的关系，支撑了整个Fibe
react 复习（一）
wangyoucaoxiaoxiao的专栏
02-25 179
  关于state: 1   不能直接更新状态     2    应该使用setState()      3    构造函数是唯一能够初始化this.state的地方 4   状态更新可能是异步的  5  状态更新合并 ：当调用setState()时，react将你提供的对象合并到当前状态，也可以独立更新     tip: 这里的合并就是说  this.setSta...
react知识点复习
qq_33404590的博客
08-10 311
react复习 生命周期：componentWillReceiveProps 钩子函数：usestate,useeffect,usecallback,usememo 属性：useRef 和 createRef 拖拽库：react-dnd componentWillReceiveProps componentWillReceiveProps(nextProps) { this.setState({ slotId: nextProps.slotId,
react快速复习
路上
09-24 214
一、主要依赖 react、react-dom、 react-router，react-router-dom、 react-redux、redux、mobx、 axios、promise、fetch、 babel、es6、node、 二、使用方式 使用jsx主要依赖于babel、es6、react、react-dom 三大类组件：函数式组件hooks、类组件、jsx 类组件： 在...
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
React学习笔记之高阶组件应用
01-19
是什么 高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。...class Hello extends React.Component { // } 如何实现 属性代理 下面的例子是最简单的一个实现 function hoc(Impo
React学习笔记之条件渲染（一）
01-19
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍： 条件渲染 可以根据state的值进行组件的条件渲染。例如： function ...
React学习笔记之事件处理（二）
12-09
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...
react学习课件.rar
10-18
哔哩哔哩react课程课件
React版本的todolist小demo 快速复习React(React)
qq_54753561的博客
05-01 589
React版本的todolist小demo 快速复习React(React) 该demo 就是帮你快速复习 react 的 事件传值，子组件传值，父传子，事件绑定，交互逻辑，react 语法，该demo有，显示隐藏列表，增加内容，删除todo，双击内容编辑是input 框的内容回填，**拉代码的时候注意组件的路径不然会报错的哦。** 最下面有记的笔记。
React复习（5）
weixin_46340162的博客
02-17 227
（1）组件数据源 （2）组件间传值类型检查 （3）task案例 （4）context （发布订阅模式）
react复习笔记
m0_45114231的博客
08-29 184
js创建虚拟dom和jsx创建虚拟dom js创建虚拟dom <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> &lt
React复习（2）
weixin_46340162的博客
02-07 464
（1）函数组件 （2）单向数据流 （3）关于继承的知识 （4）类组件 （5）时钟案例
React复习四
smallsnine的博客
02-21 199
Refs 转发 Fragments React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。 class Columns extends React.Component { render() { return ( <div> <td>Hello</td> ...
React复习全攻略：重温旧知，收获新知
最新发布
徐磊
04-08 826
温故而知新，可以为师矣~ 重温React，不仅是对知识的回顾，更是对技术的敬畏和热爱。感谢React带给我们的每一次成长与收获，期待在未来的开发中，我们能与React一起创造更多的奇迹。
复习向(react,vue
weixin_33770878的博客
06-11 82
React className只能写在原生元素里，不能写在新组件里 图片居中要考虑容器元素 activeClassName只能用在NavLink上 es let target = Object.assign({1,2},object2)如果有一样属性后面覆盖前面 或 Object.assign(target,{1,2},object2) 转载于:https://juejin.im/pos...
react 快速学习所有知识或复习笔记
PrimaryColor
11-18 590
创建项目： 创建react项目： npx create-react-app demo-app //demo-app为项目名称 运行项目： npm start 其他（安装npx命令）： npm install -g npx 初步工作： 1.删除src下的其他文件，只留下app.jsx,app.css,index.js,index.css。 2.app.jsx相当于vue的app.vue，index.js相当于vue的main.js。 3.新建文件的时候尽......
黑马react学习笔记
09-14
黑马React学习笔记主要包括React组件生命周期和整合ESLint插件的内容。在学习React时，我们首先需要导入React和ReactDOM两个包，并且使用ReactDOM.render()方法将React元素渲染到页面中。在渲染过程中，我们可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值