常见面试题（２）-CSDN博客

本文链接：https://blog.csdn.net/weixin_66557048/article/details/128819164

１.如何使用css实现一个三角形？详解

（１）通过边框就可完成
（２）设置border-right，border-left，border-top，border-bottom，border-color， border-width，不需要的边框设置隐藏属性transparent

2.什么是强缓存和协商缓存？详解

（1）强缓存：服务器通过设置http中hdader的Expires和cache-control字段告诉浏览器换存的有效期。这种方法会有一个固定时间，所带来的问题是如果服务器数据进行了更新，但是还没有到强缓存的过期时间，则数据无法更新
（2）协商缓存：协商缓存就是通过服务器来判断缓存是否可用。

3.说说React jsx转换成真实DOM的过程？详解

（1）使用React.createElement或JSX编写React组件，实际上所有的 JSX
代码最后都会转换成React.createElement(…) ，Babel帮助我们完成了这个转换的过程。
（2）createElement函数对key和ref等特殊的props进行处理，并获取defaultProps 对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象
（3）ReactDOM.render将生成好的虚拟DOM渲染到指定容器上，其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化，最终转换为真实DOM

4.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？详解

（1）react-redux ：react官方推出的redux绑定库，react-redux将所有组件分为两大类：UI组件和容器组件，其中所有容器组件包裹着UI组件，构成父子关系。容器组件负责和redux交互，里面使用redux API函数， UI组件负责页面渲染，不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态和操作状态的方法
（2）@reduxjs/toolkit：Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，使用 Redux Toolkit 都可以优化你的代码，使其更可维护

5.React render方法的原理，在什么时候会触发？详解

原理：
在类组件中，指的是render方法，在函数组件中指的是函数组件本身，在react中，我们编写jsx,通过babel编译后就会转化成js格式
CreateElement方法接收三个参数：标签，标签属性，标签子节点
在render过程中，React 将新调用的 render函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比较，更新 DOM树
触发：
（1）类组件调用 setState 修改状态
（2）函数组件通过useState hook修改状态
（3）类组件重新渲染
（4）函数组件重新渲染

6.React性能优化的手段有哪些？详解

（1）使用纯组件
（2）使用 React.memo 进行组件记忆（React.memo 是一个高阶组件），对于相同的输入，不重复执行；
（3）如果是类组件，使用 shouldComponentUpdate（这是在重新渲染组件之前触发的其中一个生命周期事件）生命周期事件，可以利用此事件来决定何时需要重新渲染组件；
（4）路由懒加载；
（5）使用 React Fragments 避免额外标记；
（6）不要使用内联函数定义（如果我们使用内联函数，则每次调用“render”函数时都会创建一个新的函数实例）；
（7）避免在Willxxx系列的生命周期中进行异步请求，操作dom等；
（8）如果是类组件，事件函数在Constructor中绑定bind改变this指向；
（9）避免使用内联样式属性；
（10）优化 React 中的条件渲染；
（11）不要在 render 方法中导出数据；
（12）列表渲染的时候加key；
（13）在函数组件中使用useCallback和useMemo来进行组件优化，依赖没有变化的话，不重复执行；
（14）类组件中使用immutable对象；

7.如何通过原生js实现一个节流函数和防抖函数？详解

（1）节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

function throttled1(fn, delay = 500) {
    let oldtime = Date.now()
    return function (...args) {
        let newtime = Date.now()
        if (newtime - oldtime >= delay) {
            fn.apply(null, args)
            oldtime = Date.now()
        }
    }
}

（2）防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

8.说说webpack中常见的loader？解决了什么问题？详解

（1）style-loader: 将css添加到DOM的内联样式标签style里
（2）css-loader:允许将css文件通过require的方式引入，并返回css代码
（3）less-loader: 处理less
（4）sass-loader: 处理sass
（5）postcss-loader: 用postcss来处理CSS
（6）autoprefixer-loader:处理CSS3属性前缀，已被弃用，建议直接使用 postcss
（7）file-loader: 分发文件到output目录并返回相对路径
（8）url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一 DataUrl
（9）html-minify-loader: 压缩HTML
（10）babel-loader :用babel来转换ES6文件到ES5