当前位置：首页 > news >正文

前端知识点复盘

news 文章来源：https://blog.csdn.net/shenruiaaa/article/details/128954905 2025/1/13 3:09:54

组件和jsx

<body><div id="root"></div><script type="text/babel">const root = ReactDOM.createRoot(document.getElementById("root"))class App extends React.Component {render() {return (<div> <h1>sherry</h1><input type="search" /></div>)}}root.render(<App />)</script>
</body>

箭头函数

普通函数： function（）{}
箭头函数（）=>{}
只有一个参数的时候我们不需要为参数添加上括号，只有一个表达式的时候可以不添加大括号，箭头函数会自动返回箭头后面的处理结果
1.箭头函数不能用new来创建构造函数的实例，普通函数可以（因为箭头函数创建的时候程序不会为它创建construct方法，也就是没有构造能力，用完就丢掉了，不像普通函数重复利用，因此也不需要构造函数原型，也就是不会自动生成prototype属性）
2.程序不会给箭头函数创建arguments对象
3.普通函数中的this是动态的，而箭头函数中的this指向的是紧紧包裹箭头函数的那个对象（定义时决定的）
4.箭头函数不能通过bind、call、apply来改变this的值，但依然可以调用这几个方法（只是this的值不受这几个方法控制）
在这里插入图片描述

插值与状态

map

map
直接写state也行，用constructor写state也行

class 类

class和new

class App{}
class首字母小写，类名首字母大写
创建实例var xx = new name();

类 constructor 构造函数

创建类–类名后面不要加小括号，生成实例–类名后面加小括号，构造函数不需要加 function 关键字

自定义方法

不需要加function关键字，不需要this

extends和super

static

静态方法
类里面的this指向：
constructor 里面的 this指向实例对象
方法里面的this指向这个方法的调用者
静态方法里的this指向类本身，用类来调用静态方法，而不是用实例去调用静态方法。一个静态方法可以调用另一个静态方法
凡是被static修饰的属性和方法都是静态方法和属性,只能被类名调用,不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的.
static

挂载和状态设置

先呈现轮廓，再把外面获取回来的数据呈现到页面上
component DidMount组件挂载完毕后再执行这个方法里面的内容

Fetch

fetch请求地址之后会返回一个promise,我们可以用promise的方法操作服务器响应的内容
get请求

fetch(url).then(response =>reponse.json())
.then(data=>console.log(data));

post请求

fetch(url，
{method：‘POST’，
body:JSON.stringify({name:input.value}),
headers:{
'Content-Type':'application/json'
},
).then(response =>reponse.json())
.then(data=>console.log(data));

ajax

通过js操控浏览器内建的XMLhttprequest构造函数与服务器取得联系
构造函数，所以可以创建新的实例对象，有自己的属性方法

promise

// 创建一个新的p对象promise
const p = new Promise((resolve, reject) => { // 执行器函数// 执行异步操作任务setTimeout(() => {const time = Date.now() // 如果当前时间是偶数代表成功，否则失败if (time % 2 == 0) {// 如果成功，调用resolve(value)resolve('成功的数据，time=' + time)} else {// 如果失败，调用reject(reason)reject('失败的数据，time=' + time)}}, 1000);
})p.then(value => { // 接收得到成功的value数据 onResolvedconsole.log('成功的回调', value)  // 成功的回调 成功的数据，time=1615015043258},reason => { // 接收得到失败的reason数据 onRejectedconsole.log('失败的回调', reason)    // 失败的回调 失败的数据，time=1615014995315}
)

抽象表达：Promise是JS中进行异步编程的新的解决方案(旧方案是单纯使用回调函数)

---- 异步编程 ①fs 文件操作 ②数据库操作 ③Ajax ④定时器

具体表达：
①从语法上看：Promise是一个构造函数 (自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法)
②从功能上看：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

阮一峰的解释：
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息
Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理

HTTP

客户端和服务端
状态码: 2** 成功
3** 重定向
4** 客户端错误
5** 服务端错误
响应首部：content-type 内容类型

闭包

闭包(closure)指有权访问另一个函数作用域中变量的函数。一个里层函数加上一个变量一起构成的

简单理解就是，一个作用域可以访问另一个函数内部的局部变量。
闭包不一定有return
不一定有内存泄漏
实现数据的私有

生命周期

代码的执行顺序：
constructor，componentDidMount和render方法的执行顺序为：
构造函数，渲染，组件挂载