前端
React
引入我们之前会使用 useState, useMemo 或者各种各样的, 使用 use 开头的函数, 这些函数就叫做 React 的 Hooks.
当我们想要在两个函数之间共享逻辑的时候, 我们会把它提取到第三个函数中. 这个第三个函数就是我们的 Hooks 了.
另外, Hook 必须用 use 开头, 否则的话 React 无法检查 Hook 是否违反了 Hook 的规则.
自定义 Hooks需要注意, Hooks 做的是将逻辑进行抽离, 不涉及 UI 部分. 例如下面这段代码, 模拟的进行了一个数据的请求.
123456789101112131415161718192021222324252627282930313233343536373839import { useEffect, useState } from "react";interface IUser { name: string; age: number;}function App() { const [user, setUser] = use ...
前端
JS
什么是函数防抖有一些函数, 会出现短时间内高频调用的情况, 比如调整窗口大小, 然后页面的布局随着修改, 实现新的布局.
生活中的例子就是, 人上电梯, 电梯不会立马开始关门操作, 而是等待两秒, 如果两秒有人进来了, 就继续等, 没了才会执行关闭电梯的方法.
这种情况下, 如果一个函数调用的频率过高, 就会产生性能问题. 为了解决这些问题, 我们就需要实现函数防抖.
函数防抖的三个条件并不是所有的函数都需要防抖, 函数防抖是有三个条件的:
高频函数
耗时函数
以最后一次调用为准
例如, 重新绘制窗口, 我们只以最后一次渲染为基准.
实现防抖代码其实要做的就是实现一个等待, 没有了再进行就好. 可以先声明一个 timerID, 记录计时器, 如果有人进电梯, 就清空计时器, 重新开始即可.
1234567891011// 例如 我有一个当窗口重新改变大小才会运行的内容// 定义一个记录ID的东西let timerID;window.onresize = () => { clearTimeout(timerID); timerID = setTimeout(() ...
前端
原理
引言渲染原理, 其实就是 HTML+CSS+JS 的原理, 是浏览器的核心知识.
然而, 这些东西都及其的复杂, 不过就算只了解一部分, 也已经优于大部分的人了.
浏览器是如何渲染页面的什么是渲染渲染, render. 在 Vue 或者 React 中, 是通过渲染虚拟 DOM 来绘制页面的. 无论如何, 前端中, 渲染的意思就是将 HTML 字符串, 转换为屏幕上看到的页面信息.
我们访问网页, 其实拿到的是一个字符串, 格式是 HTML 的格式而已. 我们分析字符串, 才知道页面上的每个像素点的颜色是什么, 进而得到整个能够看到的页面.
同时, 鼠标滚轮滚动页面, 也需要重新计算. 渲染可以理解为一个函数:
12345678function render(html) { // 计算第一行是什么 // 计算第二行是什么 // ... // 返回所有的像素 return pixes}
这就是渲染的本质.
渲染的时间点也就是在问: 什么时候进行渲染呢? 首先, 输入网址, 网络进程拿到了 HTML, 但是网络不能处理这个东西, 于是生成了一个渲染任务, ...
前端
原理
引言现在用到的计时器, Promise, ajax 和 node, 都是事件循环相关的东西. 它在就业的时候, 可以极大的缩短面试的事件.
因为事件循环是前端的一个分水岭 它决定了能够走的多高, 走的多远.
浏览器的进程模型为了介绍事件循环, 我们不能直接介绍, 还需要介绍浏览器. 因为事件循环和浏览器更加相关.
何为进程程序运行需要有它的专属的内存空间, 可以把这块内存空间简单的理解为进程.
并且, 每个应用至少有一个进程, 每个进程之间是 相互独立 的. 例如一个程序崩溃了, 别的程序不会直接崩溃. 另外, 即便要进行通信, 也需要双方同意.
何为线程有了进程以后, 就可以运行程序的代码了. 运行代码的东西, 就叫做 线程.
所以说, 一个进程至少有一个线程, 在进程开启后就会自动创建一个线程来运行代码, 这个线程就叫做 主线程.
如果程序需要同时执行多个代码, 主线程就会启动更多的线程来执行代码, 即一个进程中可以包含多个线程.
如下图, 可以看到, 就算有再多的线程, 走的也是自己的内存空间.
浏览器有哪些进程和线程浏览器其实就是一个多进程多线程的应用程序. 如今的浏览器内 ...
前端
JS
引言众所周知, JS 默认是不支持函数重载的, 如果强制这么写会出现下面这种情况:
12345678910const search = (name) => { console.log("按照名字查找");};const search = (name, age) => { console.log("按照名字和年龄查找");};search("Kaede");search("YYT", 18);
123const search = (name, age) => { ^SyntaxError: Identifier 'search' has already been declared
所以应该怎么实现函数的重载呢? 这里有两种方案.
方案 1我们可以创建一个类, 然后给这个类添加多个同名函数, 进而实现重载. 这是 JQuery 中的做法. 不过这里的添加函数的方法需要单独实现:
12345678910111 ...
前端
React
引言什么是 RNRN 是 React Native 的简称, 它允许我们通过 react 的语法, 开发移动端 APP.
可以前往如下网址查看详细内容, 在这里仅作笔记记录, 可能不是很全.
引用站外地址
React Native 中文网
React Native 官网
APP 开发模式移动端 APP 的开发模式有原生开发, 以及混合开发. 原生就是类似于 Android 就使用 Java / Kotlin, IPhone 就使用 Swift. 混合开发则指的是一次开发, 多端部署, RN 就是其中的一个. 另外的就是 H 5 开发, 其实就是普通的网页应用.
RN 就是本文所讲内容, 还有 Weex 以及 Flutter, 这里做一个对比.
混合开发框架比较
框架
RN
Weex
Flutter
公司
Facebook
Alibaba
Google
语言
J ...
前端
JS
为什么需要 Promise假如现在有一个需求, 通过 Ajax 请求一个 ID, 再根据这个 ID 请求用户名. 下面是直接使用 ajax 写的一个示例代码:
12345678910111213141516171819202122<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="./jquery.js"></script> </head> <body> <script> // 发送ajax请求 $. ...
前端
工具
引言什么是 Prettier
根据官网的介绍, Prettier 其实就是一个用来统一代码格式的工具, 并且已经直接集成在了各种工具当中.
为什么使用 Prettier在多人协作开发的时候, 每个人的代码风格总是不那么的统一, 所以我们需要一个工具来进行统一, 这里就可以使用 Prettier 了.
安装在需要的项目中执行如下代码:
123npm install --save-dev --save-exact prettier# oryarn add --dev --exact prettier
随后在根目录中创建一个对应的配置文件出来. 可以直接运行代码, 也可以直接手动创建一个 .prettierrc 文件.
1node --eval "fs.writeFileSync('.prettierrc','{}\n')"
额外的, 可以创建一个 .prettierignore 文件, 可以忽略不想进行格式化的文件.
123456# Ignore artifacts:buildcoverage# Ignor ...
普通写法不使用算法, 直接写一个普通的出来.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105#include <iostream>using namespace std;class Date { int year; int month; int day;public: Date(const int year, const int month, const int day): year(year), month(month), day(day) {}; Date() { year = 0; month = 0; ...
前端
工具
Mock.js 介绍在进行前端开发的时候, 可能会遇到需要请求后端, 但是后端数据不全面的情况. 这个时候就需要我们自己手动的伪造一些数据进行测试.
然而自己味道数据还是比较麻烦的, 可能需要再开服务乱七八糟的, 比较的繁琐. 为了解决这个问题, 我们可以使用 Mock.JS 库, 一个专门用来制作假数据的库.
基础使用安装 Mock.js这里可以先创建一个 Vue 的项目方便演示. 创建后进入目录, 安装该库.
1npm install mockjs
随后在 src 目录中创建一个 mock 目录, 用来存放我们的 mock 数据. 其中创建一个 index.js 作为我们的 mock 总文件. 并且直接引入, 方便使用.
构建数据index 是用来综合数据的, 我们创建另外一个 ts 文件用来模拟. 比如这里需要模拟一个用户数据, 那么就创建一个 user.js, 并且写入如下内容, 用作 Mock.
这里需要按照语法来走.
123456789101112// 引入mockimport Mock from 'mockjs'// 定义数据以及对应的目录// u ...
