/images/avatar.jpeg
写过点代码读过点书

React 灵魂 23 问,你能答对几个?

1、setState 是异步还是同步? 合成事件中是异步 钩子函数中的是异步 原生事件中是同步 setTimeout 中是同步 相关链接: 你真的理解 setState 吗? 2、聊聊 react@16.4 + 的生命周期 相关连接: React 生命周期 我对 React v16.4 生命周期的理解 3、useEffect(fn, []) 和 componentDidMount 有什么差异? useEffect 会捕获 props 和 state。所以即便在回调函数里,你拿到的还是初始的 props 和 state。如果想得到“最新”的值,可以使用 ref。 4、hooks 为什么不能放在条件判断里? 以 useState 为例,在 react 内部,每个组件(Fiber)的 hooks 都是以链表的形式存在 memoizeState 属性中: update 阶段,每次调用 useState,链表就会执行 next 向后移动一步。如果将 useState 写在条件判断中,假设条件判断不成立,没有执行里面的 useState 方法,会导致接下来所有的 useState 的取值出现偏移,从而导致异常发生。 参考链接: 烤透 React Hook 5、fiber 是什么? React Fiber 是一种基于浏览器的单线程调度算法。 React Fiber 用类似 requestIdleCallback 的机制来做异步 diff。但是之前数据结构不支持这样的实现异步 diff,于是 React 实现了一个类似链表的数据结构,将原来的 递归 diff 变成了现在的 遍历 diff,这样就能做到异步可更新了。

手动实现一个深拷贝

1、 JSON.parse() 与 JSON.stringify() 最简单的方式是使用 JSON.parse() 与 JSON.stringify() 进行深拷贝: 1 2 3 function cloneDeep(target) { return JSON.parse(JSON.stringify(target)); } 但是它有一些缺陷: 无法处理对象内的循环引用 无法保持之前的原型链 无法处理 bigint 类型 无法正确处理 正则、Date 类型 会忽略 function、undefined 类型 会忽略 key 为 symbol 类型的字段 2、MessageChannel 还可以使用 MessageChannel 来进行深拷贝: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function deepClone(target) { return new Promise((resolve) => { const { port1, port2 } = new MessageChannel(); port2.

前端 10 问之网络 (第一篇)

1、TCP/IP 模型有几层?它们分别解决了什么问题 物理层:网线传输比特流 数据链路层:解决了局域网内主机间通信 网络层:解决了两个局域网之间的通信 传输层:解决了数据传输到主机后,应该交给哪个进程处理的问题 w 2、HTTP 有哪些常见的状态码 1、200 OK: 请求成功 2、301 Moved Permanently: 永久重定向 3、302 Found: 临时重定向 4、304 Not Modified: 所请求的资源未修改 5、400 Bad Request: 客户端请求的语法错误,服务器无法理解 6、401 Unauthorized: 请求要求用户的身份认证 7、403 Forbidden: 服务器拒绝执行此请求 8、404 Not Found: 要请求的资源没有找到 9、500 Internal Server Error: 服务器内部错误 相关链接: HTTP 响应代码 3、为什么服务器有时候会返回 304 状态码 先上一张 HTTP 请求流程图: 浏览器进行资源请求时,大致会经过如下几个阶段: 1、是否禁止缓存 禁止缓存指的是缓存中不得存储任何关于客户端请求和服务端响应的内容。每次由客户端发起的请求都会下载完整的响应内容。 在请求头中,Cache-Control: no-store与Pragma: no-cache都可以禁止缓存, 但两者也有区别,Pragma: no-cache可以兼容http 1.0 ,而Cache-Control: no-store是http 1.1提供的。因此,Pragma: no-cache可以应用到http 1.0和http 1.1,而Cache-Control: no-store只能应用于http 1.1。 2、是否检查本地副本是否过期 是否检查本地版本是否过期主要由Cache-Control 的 no-cache和must-revalidate这两个可选值控制,其中:

Docker 10 问 (第一篇)

1、容器技术解决了什么问题? 解决了开发人员和运维人员的沟通 容器镜像是轻量的、可执行的独立软件包 ,包含软件运行所需的所有内容:代码、运行时环境、系统工具、系统库和设置。 容器化软件适用于基于 Linux 和 Windows 的应用,在任何环境中都能够始终如一地运行。 容器赋予了软件独立性 ,使其免受外在环境差异(例如,开发和预演环境的差异)的影响,从而有助于减少团队间在相同基础设施上运行不同软件时的冲突。 一句话概括容器:容器就是将软件打包成标准化单元,以用于开发、交付和部署。 2、docker 底层用了哪些技术? namespace:做隔离 pid, net, ipc, mnt, uts control groups:做资源限制 union file systems:container 和 image 的分层 3、容器和虚拟机有什么区别? 容器是 APP 层面的隔离,虚拟化是物理层面的隔离; 容器占用的空间较少(容器镜像大小通常只有几十兆),瞬间就能完成启动。 每个 VM 都包含一整套操作系统、一个或多个应用、必要的二进制文件和库资源,因此占用大量空间。而且 VM 启动也相对缓慢。 4、什么是 DevOps? DevOps 是一种重视“软件开发人员(Development)”和“IT 运维技术人员(Operations)”之间沟通合作的文化、运动或惯例。通过自动化“软件交付”和“架构变更”的流程,来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。具体来说,就是在软件交付和部署过程中提高沟通与协作的效率,旨在更快、更可靠的的发布更高质量的产品。 5、image 与 container 的区别? image 文件和 meta data 的集合 分层的,每一层可以添加改变删除文件,成为一个新的 Image 不同的 image 可以共享相同的 layer 本身是 read-only 的 container 通过 image 创建 在 image layer 上建立一个 container layer(可读写) image 负责 app 的存储和分发,container 负责运行 app

前端 10 问之 Nginx (第一篇)

1、nginx 的作用 静态资源服务 浏览器缓存 防盗链 资源压缩 限流 代理服务 正向代理 反向代理 负载均衡 2、nginx 和 apache 的区别? 轻量级,同样起 web 服务,比 apache 占用更少的内存及资源 抗并发,nginx 处理请求是异步非阻塞的,而 apache 则是阻塞型的,在高并发下 nginx 能保持低资源低消耗高性能 高度模块化的设计,编写模块相对简单 最核心的区别在于 apache 是同步多进程模型,一个连接对应一个进程;nginx 是异步的 epoll 模型,多个连接(万级别)可以对应一个进程。 3、nginx 配置文件的一般结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 worker_processes 1; # worker进程的数量 events { # 事件区块开始 worker_connections 1024; # 每个worker进程支持的最大连接数 } http { # HTTP 区块开始 server { # 第一个Server区块开始,表示一个独立的虚拟主机站点 listen 80; # 提供服务的端口,默认80 server_name localhost; # 提供服务的域名主机名 location / { # 第一个location区块开始 root htm; # 站点的根目录,相当于Nginx的安装目录 index index.