2022.10.21前端面试部分问题记录

项目及框架

vue移动端项目介绍&&项目中自己做了哪些功能配置？

eslint
lib-flexible+postcss-pxtorem适配(待补充)

react 项目做了哪些针对可用性的公共模块的抽取？

图表类&&表单风格统一（ps被问表单风格为什么不统一，没有提前设计吗）

项目中做了哪些性能优化？

代码质量

使用shouldComponentUpdate，最大限度减少重复渲染
先写方法，再在render时this.props调用，减少箭头函数
列表类组件使用key
减少dom，ref操作
简单组件使用无状态组件，减少开销

数据渲染
pureComponent
长列表虚拟渲染，可视区域渲染

打包优化
尽量减少依赖（统一走平台）

react hook本身性能优化方法等,挺全面的总结地址juejin.cn/post/706158…

项目打包出来的是npm包吗？

组件和平台一起打包，是gzip包？

hooks中怎么使用ref，父组件怎么通过ref调用子组件的方法？

useRef+forwardRef+useImperativeHandle 父组件中useRef创建ref对象，子组件中forwardRef包裹最外层，ref作为props之外的第二个参数传递，内部使用useImperativeHandle方法，暴露给父组件一些状态和方法；

  // 父组件
  import React, { useState,useRef } from 'react';
  import child from './child';
  export function parent(props) {
      // 获取子组件实例
      const childRef = useRef();
      const onClickChange = () => {
        // 调用子组件的方法
        childRef.current.changeValue('从父组件改变');
      };

      return (
        <div>
          <div>父组件</div>
          <child ref={childRef} />
        </div>
      );
  }
  
  //子组件
  import React, { useState,useRef,useImperativeHandle,forwardRef} from'react';
  const child = forwardRef((props, ref) => {
      const [value, setValue] = useState("我是子组件");
      // 自定义暴露给父组件的实例值 (useImperativeHandle 要配合 forwardRef使用)
      useImperativeHandle(ref, () => ({
        // 暴露函数给父组件调用
        value,
        changeValue,
        // 也可以暴露子组件的状态值给父组件使用
      }));
      const changeValue = (val) => {
        setValue(val)
      }
      return (
        <div>
          {value}
        </div>
      )
   })
   export default child

类组件-----父组件创建ref后,传给子组件后，直接在父组件中调用子组件的方法即可；

  //创建方式
  <Child ref={ref => this.childRef = ref} />
  //创建方式
  this.myRef = React.createRef();
  ...
  <Child ref={this.childRef} />
  
  //调用子组件中的方法
  this.childRef.current.changeValue("从父组件改变");

hooks中的依赖数组中支持哪些值？

依赖数组中必须包含在 callback 内部用到的所有参与 React 数据流的值，比如 state、props 以及它们的衍生物；（可以以函数作为依赖，见文章的补充部分）www.csdn.net/tags/MtjaMg… （当该变量变化时，需要触发 useEffect 函数执行时，需要把变量放到 deps 数组中，而不是因为 useEffect 中用到了这个变量） blog.csdn.net/lgno2/artic…

html严格模式？

对前端工程化的理解？

二面（构建工具等）

webpack编译文件的时候向其中注入了什么？

3个主要的辅助方法:
__webpack_require__.d：核心其实是Object.defineProperty，主要是用来将我们模块导出的内容添加到全局的__webpack_module_cache__缓存上
__webpack_require__.o：是Object.prototype.hasOwnProperty的一个简写
__webpack_require__.r：这个方法就是给每个模块添加一个属性__esModule，来表明他是一个ES6的模块
webpack统一封装后的require:
__webpack_require__用于加载模块，是webpack内部实现的一套依赖引入函数

---------webpack编译过程------

将import这种浏览器不认识的关键字替换成了__webpack_require__函数调用。
__webpack_require__在实现时采用了类似CommonJS的模块思想。
一个文件就是一个模块，对应模块缓存上的一个对象。
当模块代码执行时，会将export的内容添加到这个模块对象上。
当再次引用一个以前引用过的模块时，会直接从缓存上读取模块

引用antd组件时的按需引入怎么实现？babel-plugin-import如何实现按需引入的？

面试题q.shanyue.tech/fe/react/72… about babel知乎 www.zhihu.com/question/26…

10月面试记录