【无标题】

Redis常见面试题:

SortedSet和List异同点：



React常见面试题:

React生命周期：
版本<16.3

版本>=16.4





useState:用于在函数组件中添加内部状态.返回一个数组，包含当前的状态值和用于更新状态的函数。调用这个更新状态的函数，可以改变状态并触发视图的更新.

useEffect:这个Hook作用相当于componentDidMount(组件挂载)，componentDidUpdate(组件更新)和componentWillUnmount(组件将要销毁)这三个生命周期函数的组合.它有两个参数，第一个参数是回调函数，第二个参数是一个数组，数组中的元素都是依赖，每当依赖发生改变，就会触发第一个函数的执行.

**useRef:这个Hook不仅可以获取DOM节点，还可以保存某数据为当前的ref.**新的渲染中，数据不会重新渲染.同时，如果需要防止在组件离开时未销毁的操作，可以选择设置setTimeout.

useContext:这个Hook接收一个context对象(React.createContext的返回值),并返回该context的当前值.当前的context值由上层组件中距离当前组件最近<MyContext.Provider>的value prop决定.

useMemo:这个Hook可以优化函数组件的性能.它接受一个回调函数和一个依赖数组作为参数,并返回一个记忆化的值.只有在依赖发生变化时,回调函数才会重新执行并返回新的值.

useCallback:这个Hook可以优化函数组件的性能.它接受一个回调函数和一个依赖数组作为参数,并返回一个记忆化的回调函数.只有在依赖项发生变化时,回调函数才会重新创建,否则会返回缓存的回调函数.

https://www.nowcoder.com/exam/interview/detail?questionClassifyId=0&questionId=2412715&questionJobId=156&type=1



useCallback和useMemo的区别?
都是用于优化性能,通过缓存数据来避免不必要的重新渲染.它们都接受一个函数和依赖项数组作为参数,只有当依赖项发生变化时,才会重新计算或返回新的值.
useCallback和useMemo的主要区别在于它们缓存的数据类型不同.useCallback缓存的是一个函数，而useMemo缓存的是一个值.

useEffect和useLayoutEffect的区别?

locationStorage和sessionStorage的区别?

cookie , locationStorage, sessionStorage的区别?



TCP的"三握四挥" 目的:是为了确保数据的可靠传输


在vue中使用jsx：
npm install --save-dev babel-plugin-transform-vue-jsx

hooks对useState进行防抖处理:(React 18.0)

useState 和 useCallback这两个hooks来实现对useState的防抖处理,实例代码为:

import React, { useState, useCallback } from 'react';  
//接受两个参数:初始值和延迟时间，返回一个状态值和一个防抖的setState函数

//在延迟时间内，如果再次调用防抖的setState函数，则会取消之前的延迟操作，并重新开始计时。这样就可以实现防抖的效果
function useDebouncedState(initialValue, delay){
    const [state,setState] = useState(initialValue);
    const [deboundedCallback,setDeboundcedCallback] = useState(null);


    useEffect(()=>{
        const timer = setTimeout(()=>{
            if(debouncedCallback){
                debouncedCallback();
                setDeboundcedCallback(null);
            }
    },delay);

    return ()=>{
        clearTimeout(timer);
    };
    },[delay]);

    const debouncedSetState = useCallback(()=>{
        if(deboundedCallback){
            clearTimeout(timer);
            setDeboundcedCallback(null);
        }else{
            setDeboundcedCallback(()=>setState(...arguments));
        }
    },[debouncedCallback]);

    return [state,deboundcedSetState];
}

**扁平化数组的函数:**
```javascript
import React from 'react';  

function flattenArray(arr){
    let result = [];
    for(let i=0;i<arr.length;i++){
        if(Array.isArray(arr[i])){
            result = result.concat(flattenArray(arr[i]));
        }else{
            result.push(arr[i]);
        }
    }
    return result;
}

function App(){
    const nestedArray = [1,[2,[3,[4,5]],6]];

    const flatArray = flattenArray(nestedArray);
    return(
        <div>
            <h1>Nested Array:{nestedArray}</h1>
            <h2>Flat Array:{flatArray}</h2>
        </div>
    );
}
export default App;

前端性能优化:

(1) 加载优化（减少http请求数）
常用的减少http请求数有以下几种:
①合并图片   合并大图除了能减少http请求数外,还可以充分利用缓存来提升性能.
②合并压缩css样式表和js脚本   减少http连接数
③去掉不必要的请求  无效请求连接
④首屏加载   
⑤充分利用缓存  减少服务器发送的请求次数，节省网络资源 
⑥预加载   大型资源可使用Loading
⑦异步加载第三方资源  异步加载第三方资源

(2)图片优化
①尽可能的使用PNG格式的图片
②同时在代码中进行图片的延迟加载,也叫做懒加载
③避免img,iframe等标签的src属性为空
④图像尽量避免使用DataURL

(3)使用CDN
(4)开启Gzip(代码压缩)
(5)样式表和JS文件的优化
(6)减少不必要的Cookie

(7)脚本优化
①复杂动画效果,使用绝对定位让其脱离文档流，避免循环DOM元素，用transform:translate 代替 position  left、right...以此来尽量减少回流和重绘
②将脚本往后挪，减少对并发下载的影响
③缓存.length的值:每次.length计算使用一个变量保存值
④尽量使用事件委托
⑤尽量使用id选择器：id选择器选择元素是最快的，具有唯一性，灵活性和优先性的优点

(8)前端代码结构的优化
①设置Viewport：HTML的viewport可加快页面的渲染
②减少DOM结点：DOM结点太多会影响页面的渲染
③尽量使用css3动画：合理使用requestAnimationFrame动画代替setTimeout
④优化高频事件：scroll , touchmove等事件尽量使用函数防抖节流等进行限制
⑤不滥用WEB字体:WEB字体需要下载、解析、重绘当前页面，尽量减少使用
⑥文件命名规则须统一且要有意义，同类型文件归类到相同的文件夹中
```![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/333fca3f01e24b8fa9893be8563e63d2.png)

(9)SEO优化

webpack构建优化:
①线程加载器
npm i thread-loader -D
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3eb6086686804c29a9f367cf84fad791.png)
②缓存加载器
npm i cache-loader -D
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/18a68261a69c4e79984cd3a38a5fe40b.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/90e78e5bfd674b2eb30474924629793d.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1a6c073186ef4b938724f5fbfe97e493.png)