Huangyuntse

记录面试中遇到一些比较有意思的场景题

虚拟滚动是如何去实现的（长列表，大表格）

1、监听滚轮事件/触摸事件，记录列表的总偏移量。
2、根据总偏移量计算列表的可视元素起始索引。
3、从起始索引渲染元素至视口底部。
4、当总偏移量更新时，重新渲染可视元素列表。
5、为可视元素列表前后加入缓冲元素。
6、在滚动量比较小时，直接修改可视元素列表的偏移量。
7、在滚动量比较大时（比如拖动滚动条），会重新渲染整个列表。
事件节流。

包管理器

Pnpm是怎么解决幽灵依赖的

hard link + symbolic link

如何确定一个项目用的包管理器版本：enigne字段

1
2
3
4

"engines": {
  "node": ">=14.0.0",
  "npm": ">=7.0.0"  // 项目要求的 npm 最低版本
}

如何避免业务项目被发到npm上

在 package.json 中添加 private 字段

在项目的 package.json 文件中添加 private: true 字段，这是最直接的方式。当 private 为 true 时，npm 会拒绝发布该项目。

使用 .npmignore 或 .gitignore 文件

将项目中的所有文件添加到忽略列表，确保没有文件被发布。.npmignore 会覆盖 .gitignore 的规则。

设置预发布钩子

在 package.json 中添加 prepublishOnly 脚本，使其在发布前失败：

使用 .npmrc 文件锁定发布源

在项目根目录创建 .npmrc 文件，设置为私有源或无效源：

React有哪些hooks

• useState
• useEffect
• useRef
• useMemo
• useCallback
• useContext
• useReducer
• useLayoutEffect
• useTransition
• useId
• useDebugValue
• useDeferredValue

useLayoutEffect和useEffect的区别

useEffect：异步执行，在浏览器完成渲染后（页面已绘制）
useLayoutEffect：同步执行，在 DOM 更新后、浏览器绘制前（用户不可见），适用于需要读取 DOM 布局或强制同步更新的场景（如测量 DOM、修改样式）。

如何借助interSectionObserver实现一个dom可见性的自定义hook

有一个关键点是Ref的更新在useEffect执行前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import { useEffect, useState, useRef } from 'react';
const useInView = (
    options = {
        root: null,
        rootMargin: '0px 0px',
        threshold: 1,
    },
    triggerOnce = false, // 是否只触发一次
) => {
    const [inView, setInView] = useState(false);
    const targetRef = useRef(null);

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    setInView(true);
                    if (triggerOnce) {
                        // 触发一次后结束监听
                        observer.unobserve(entry.target);
                    }
                } else {
                    setInView(false);
                }
            });
        }, options);

        if (targetRef.current) {
            // 开始监听
            observer.observe(targetRef.current);
        }

        return () => {
            if (targetRef.current) {
                // 组件卸载时结束监听
                observer.unobserve(targetRef.current);
            }
        };
    }, [options, triggerOnce]);

    return [targetRef, inView];
};

export default useInView;

useEffect 中如何使用 async/await

1. async函数抽离到外部

   1 2 3 4 5 6 7 8 9

   async function fetchMyAPI() { let response = await fetch("api/data"); response = await res.json(); ådataSet(response); } useEffect(() => { fetchMyAPI(); }, []);

let、const的区别

• 块级作用域
• 重复声明变量会报错
• 不能在声明前访问

数组去重方法

对象拷贝方法

数组交集、并集、差集

数组扁平

计算机网络

正向代理和反向代理

正向代理

正向代理是代理客户端，服务器无法感知客户端，客户端的请求都发往代理服务器，代理服务器替客户端发送请求给服务器，并把服务器响应的数据返回给客户端

应用：翻墙，接口转发实现跨域

反向代理

反向代理是代理服务器，客户端无法感知服务器

应用：负载均衡

Webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

Webpack 五个核心概念

Entry

入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解
JS)

Plugins

插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。

process.env

process 是 Node.js 中的 一个全局变量，提供来有关当前 Node.js 进程的信息并对其进行控制。而process 中的 env 则是返回包含用户环境的对象。可以通过 process.env 拿到当前项目运行环境的信息。

设置环境变量

通过cli的方式进行设置

1
2

// index.js中
console.log(process.env.PROT)

Windows (cmd.exe)

1

set PROT=10086 && node index.js

Linux, macOS (Bash)

1

PROT=10086 node index.js

项目拆解：

1. Jsx 和虚拟 DOM

2. 组件和生命周期

3. Diff

4. 异步的setState

5. hook支持

具体思路

将jsx经过babel转成React.createElement的形式

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class Hem extends React.Component {
    render() {
        return (
            <A>
                <B>
                    <C>
                        <div />
                        <span />
                    </C>
                    <D />
                </B>
                <E />
                <F />
            </A>
        );
    }
}

经过babel转义后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

_createClass(Hem, [
    {
        key: "render",
        value: function render() {
            return React.createElement(
                A,
                null,
                // A组件的亲儿子组件B
                React.createElement(
                    B,
                    null,
                    React.createElement(
                        C,
                        null,
                        // C组件的亲儿子 div
                        React.createElement("div", null),
                        // C组件的亲儿子 span
                        React.createElement("span", null)
                    ),
                    React.createElement(D, null)
                ),
                // A组件的亲儿子组件E
                React.createElement(E, null),
                // A组件的亲儿子组件F
                React.createElement(F, null)
            );
        },
    },
]);

代码自动格式化工具：prettier

配置过程：https://prettier.io/docs/en/precommit.html

yarn add --dev --exact prettier

新建.prettierrc.json，.prettierignore文件

设置git commit预提交钩子

npx mrm@2 lint-staged

规范git commit工具：commitlint

配置过程：https://github.com/conventional-changelog/commitlint

yarn add --save-dev @commitlint/config-conventional @commitlint/cli

新建 commitlint.config.js文件，引入规则module.exports = {extends: [‘@commitlint/config-conventional’]}