冰淇淋配马卡龙-CSDN博客

原创解决多级路径刷新页面样式丢失的问题

解决多级路径刷新页面样式丢失的问题方法一：public/index.html 中引入样式时不写 ./ 写 / (常用)方法二：public/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL% (常用)方法三：使用HashRouterReactDOM.render( <HashRouter> <App/> </HashRouter>, document.getElementById('r

2022-04-07 14:58:26 244

原创 React_路由的使用与组件问题，以及NavLink的使用和封装

一、相关理解SPA的理解A. 单页Web应用（single page web application，SPA）。B. 整个应用只有一个完整的页面。C. 点击页面中的链接不会刷新页面，只会做页面的局部更新。D. 数据都需要通过ajax请求获取, 并在前端异步展现。路由的理解什么是路由?一个路由就是一个映射关系(key:value)key为路径, value可能是function或component路由分类后端路由：A. 理解： value是function, 用

2022-03-25 17:26:09 326

原创 github搜索案例相关知识点总结

设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。ES6小知识点：结构赋值+重命名 let obj = {a:{b:1}} const {a} = obj; //传统解构赋值 const {a:{b}} = obj; //连续解构赋值 const {a:{b:value}} = obj; //连续解构赋值+重命名消息订阅与发布机制1、先订阅，再发布（理解：有一种隔空对话的感觉）2、适用于任意组件间通信3、要在组件的co.

2022-03-22 15:03:18 159

原创 JavaScript之Symbol()函数

Symbol() 函数不能用作构造函数，与 new 关键字一起使用。这样做是为了避免创建符号包装对象，像使用Boolean 、 String 或 Number 那样，它们都支持构造函数且可用于初始化包含原始值的包装对象：let myBoolean = new Boolean();console.log(typeof myBoolean); // "object"let myString = new String();console.log(typeof myString); // "object"

2022-03-18 18:28:37 478

原创 React_脚手架配置代理方法（详细）

脚手架配置代理方法1：客户端：import React, {Component} from 'react'import axios from 'axios'export default class App extends Component{ getStudentData=()=>{ axios.get('http://localhost:3000/students').then( response => {console.lo

2022-03-18 17:37:25 272

原创 Promise的关键问题

一、如何修改promise对象状态修改promise对象状态有三种方法：（penging未改变时状态，fulfilled (resolved)成功状态，rejected失败状态）resolve 函数resolve(‘ok’); // pending => fulfilled (resolved)reject 函数reject(“error”);// pending => rejected抛出错误throw ‘出问题了’;//pending => rejecte

2022-03-16 14:28:21 900

原创 Promise的基本使用

一、初始Promise抽象表达:Promise 是一门新的技术(ES6 规范)Promise 是 JS 中进行异步编程的新解决方案备注：旧方案是单纯使用回调函数具体表达:从语法上来说: Promise 是一个构造函数从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值为什么要用 Promise?指定回调函数的方式更加灵活支持链式调用, 可以解决回调地狱问题promise的基本流程实例代码说明：调用函数resolve()、

2022-03-15 16:52:58 4178 1

原创 React笔记_DOM的diffing算法以及 key的作用

验证diffing算法：<script type="text/babel"> // //创建组件 class Time extends React.Component{ state = {date: new Date()} componentDidMount(){ setInterval(()=>{

2022-03-11 15:55:37 115

原创 React笔记_生命周期（详细）

生命周期的理解组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。引出生命周期对组件进行相应渲染以及或者卸载组件，使用自带函数unmountComponentAtNode()完整代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> &

2022-03-10 15:22:54 882

原创 React之高阶函数_函数柯里化

高阶函数_函数柯里化高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。常见的高阶函数：Promise()setTimeout()arr.map()等等代码示例：<!DOCTYPE html><html><he

2022-03-09 16:48:35 311

原创 JavaScript变量、作用域与内存笔记易错点

JavaScript变量、作用域与内存笔记易错点1.如果值是对象或 null ，那么typeof 返回 “object”let n = null;console.log(typeof n); // object2.虽然执行上下文主要有全局上下文和函数上下文两种（eval()调用内部存在第三种上下文），但有其他方式来增强作用域链。某些语句会导致在作用域链前端临时添加一个上下文，这个上下文在代码执行后会被删除。通常在两种情况下会出现这个现象，即代码执行到下面任意一种情况时： a) try / c

2022-03-09 15:48:29 119

原创 React笔记之受控组件与非受控组件

包含表单的组件分类1. 受控组件将input这个DOM组件中的输入数据存储到state状态中，然后再在要使用的地方进行调用，是可控制的。完整代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>2_受控组件</title></head><body>

2022-03-09 10:57:38 554

原创 React之使用event.target来防止过度使用refs属性

通过onXxx属性指定事件处理函数(注意大小写)a) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 --------为了更好的兼容性b) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) -------为了高效通过event.target得到发生事件的DOM元素对象因为这里如果使用refs属性获取标签并运用显示的话都是对同一个input标签而言的，所以可以直接用event.target的方式，其中event是系统参数。相关代码：&.

2022-03-08 17:57:58 405

原创 object对象变量的赋值使用的指向问题

object对象变量的赋值使用的指向问题在把引用值从一个变量赋给另一个变量时，存储在变量中的值也会被复制到新变量所在的位置。区别在于，这里复制的值实际上是一个指针，它指向存储在堆内存中的对象。操作完成后，两个变量实际上指向同一个对象，因此一个对象上面的变化会在另一个对象上反映出来，如下面的例子所示：let obj1 = new Object();let obj2 = obj1;obj1.name = "Nicholas";console.log(obj2.name); // "Nicholas"

2022-03-08 17:32:23 919

原创 react组件实例三大核心属性之refs

三大核心属性分别是：state、props、refsrefs属性组件内的标签可以定义refs属性来标识自己字符串形式的ref通过ref="input1"获取标签属性值通过this.refs传值展现完整代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>1_字符串形式的ref</title></head>&lt

2022-03-08 17:19:08 597

原创 React 之函数式组件使用props

对于react的三大核心属性state、props、refs，只有props能被函数式组件使用，因为只有props属性可以作为参数调用。相关代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>3_函数组件使用props</title></head><body> <!--准备好一个容器--&gt

2022-03-08 10:02:19 4674

原创 react组件实例三大核心属性之props

三大核心属性分别是：state、props、refsprops属性每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中基本使用：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>1_props的基本使用</title></head><body>

2022-03-07 16:59:33 374

原创 react组件实例三大核心属性之state

三大核心属性分别是：state、props、refsstate属性state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)先附上整体实例原码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>state</title>&l

2022-03-07 15:49:53 231

原创区分【js语句（代码）】与【js表达式】

区分【js语句（代码）】与【js表达式】一定注意区分：【js语句（代码）】与【js表达式】1.表达式2.语句（代码）一定注意区分：【js语句（代码）】与【js表达式】1.表达式一个表达式会产生一个值，可以放在任何一个需要值的地方。下面这些都是表达式:(1) a(2) a+b(3) demo(1)(4) arr.map()(5) function test () {} 2.语句（代码）下面这些都是语句代码:(1) if(){}(2) for(){}(3) switch(){cas

2022-03-04 10:16:24 212

原创 React笔记 jsx语法规则

jsx语法规则：定义虚拟DOM时，不要写引号。标签中混入JS表达式时要用{}。const myId='aTgUiGu' const myData='hello,rEaCt' // const VDOM = ( <h2 id={myId.toLowerCase()}> <span>{myData.toLowerCase()}</span&

2022-03-03 17:27:31 101

原创 js笔记入门基础

**toString()、String()、String.raw标签函数**toString() 返回数值的十进制字符串表示。而通过传入参数，可以得到数值的二进制、八进制、十六进制，或者其他任何有效基数的字符串表示，比如：let num = 10;console.log(num.toString()); // “10”console.log(num.toString(2)); // “1010”console.log(num.toString(8)); // “12”console.lo

2022-03-03 16:05:57 235

原创 React笔记虚拟DOM与真实DOM

虚拟DOM与真实DOM关于虚拟DOM：本质是Object类型的对象（一般对象）虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性虚拟DOM最终会被React转化为真实DOM，呈现在页面上真实DOM：虚拟DOM：...

2022-03-03 11:34:49 384

原创 React学习笔记虚拟DOM的两种创建方式

React学习笔记虚拟DOM的两种创建方式1、使用jsx创建虚拟DOM2、使用js创建虚拟DOM1、使用jsx创建虚拟DOM代码：<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script>&

2022-03-03 10:13:52 465

qq_51219425的博客