react面试题

第一部分 函数组件和类组件

1.react组件之间如何通讯

      回调函数

2.JSX本质是什么？

   语法糖

3.context是什么,如果应用？

 context是全局信息接口 应用：得到当前的上下文

4.说一下shouldComponentUpdate的用途

判断模块需不需要重新渲染，控制组件是否需要进行加载

5.说一下redux单向数据流的机制

action,store,reduer,view

6.react类组件的setState是同步操作还是异步操作？

异步操作

7.什么是纯函数

一个函数的返回结果只依赖于他的参数

8.介绍react的组件生命周期

初始化状态：1.constructor执行函数 2.  render函数   3.componentWillMount 4.componentDidMount

更新状态：1.执行生命周期 componentWillReceiveProps②执行生命周期 getDerivedStateFromProps③执行生命周期 shouldComponentUpdate④执行生命周期 componentWillUpdate

9.react发起ajax应该在那个生命周期

componentDidMount

10.渲染列表，为何使用key?

key可以帮助某次dom元素增删改查的时候发生变化

11.函数组件和class组件的区别

语法上的区别，调用方式

12.什么是受控组件，什么是非受控组件？

受控组件是受控制的组件状态 全程响应外部数据

非受控组件是不受控的组件 初始化是接受外部数据 然后自己在内部存部的自身状态

13.何时使用异步组件

在路由中   在单文件组件中   在全局中

14.多个组件又公共逻辑,如何抽离？

高阶组件  Render Props

15.redux如何进行异步请求

redux中保存的counter是一个本地定义的数据

16.react-router如何配置懒加载的

React利用 React.lazy与import()实现了渲染时的动态加载

利用Suspense来处理异步加载资源时页面应该如何显示的问题

17.什么是PuieComponent?

PureComponent会对props和state进行浅比较,跳过不必要的更新,提高组件性能

18.React事件和DOM事件有什么区别？

事件捕获阶段  目标阶段   事件冒泡阶段  选择监听事件的阶段

19.React性能优化方式有哪些？

懒渲染 懒加载 虚拟列表

20.说一下React和vue的区别

监听数据变化的实现原理不同  数据流的不同 组件通信的区别  模板渲染方式的不同

第二部分：react hooks

1.列举十个常用的react 内置hooks

useState    设置和改变state，代替原来的state和setState
useEffect   代替原来的生命周期，componentDidMount，componentDidUpdate 和 componentWillUnmount 的合并版
useLayoutEffect 与 useEffect 作用相同，但它会同步调用 effect
useMemo 控制组件更新条件，可根据状态变化控制方法执行,优化传值
useCallback useMemo优化传值，usecallback优化传的方法，是否更新
useRef  跟以前的ref，一样，只是更简洁了
useContext  上下文爷孙及更深组件传值
useReducer  代替原来redux里的reducer,配合useContext一起使用
useDebugValue   在 React 开发者工具中显示自定义 hook 的标签，调试使用。
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。

2.为什么会有react hooks ，他解决了那些问题？

• 难以重用和共享组件中的与状态相关的逻辑

• 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面

• 类组件中的this增加学习成本，类组件在基于现有工具的优化上存在些许问题

• 由于业务变动，函数组件不得不改为类组件等等

• 复杂组件 类组件 与函数组件有差异的问题

3.react Hooks 如何模拟组件的生命周期

componentDidMount   shouldComponentUpdate  componentDidUpdate

4.如何自定义hooks

简单来讲自定义hooks就是把逻辑抽离出来，提取到第三个函数中，当需要使用时可直接调取函数拿到返回值，可进行传参

Hooks是个函数用于数据格式化 业务逻辑性

5.说一下react hooks 性能优化

减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。

减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。

6.使用react hooks 遇到那些坑

使用push，pop，splice等直接更改数组对象的坑
因为useState的更新函数会直接替换老的state，所以我们在对对象或者数组的state做增删的时候不能像以前直接对数组使用push，pop，splice等直接改变数组的方法

7.Hooks相比HOC和render prop 有哪些优点

优点: 逻辑进行复用,不会影响到组件内部的逻辑;

缺点:HOC传递给被包裹的组件时Props很容易覆盖

第三部分： webpack面试真题

1.前端为何要进行打包和构建？

体积更小 加载更快    编译高级语言和语法    兼容性和错误检查

统一、高效的开发环境   统一的构建流程和产出标准   集成公司构建规范

2.modle chunk bundle 的区别

model - 各个源码文件，webpack中一切皆模块

chunk - 多模块合并成的，如 entry import() spitChunk

bundle - 最终输出的文件

3. loader和plugin的区别

loader - 模块转换器，如 less -> css

plugin - 扩展插件，如 HtmlWebpackPlugin

4.常用的loader和plugin有那些？

babel - JS新语法编译工具，不关心模块化

webpack - 打包构建工具，是多个loader plugin的集合

5.Babel和webpack的区别

output.library

6.webpack如何产生一个lib库

1.babel-polyfill会污染全局 2.babel-runtime不会污染全局 3.产出第三方lib要用balel-runtime

7.说一下Babel-poly和babel-runtime的区别

1.babel-polyfill会污染全局

2.babel-runtime不会污染全局

3.产出第三方lib要用balel-runtime

8.webpack如何实现懒加载

1.import（）

2.结合Vue React 异步组件

3.结合Vue-router React-router异步加载路由

9.为何Proxy不能被Polyfill?

1.优化babel-loader 2.IgnorePlugin  3.noParse  4.happyPack  5.ParallelUglifyPlugin

10.webpack如何优化构建速度

 1.自动刷新  2.热更新  3.DllPugin

11.webpack如何优化产生代码

1.小图片base64编码   2.bunble 加 hash    3.懒加载    4.提取公共代码

5.使用CDN加速    6.IgnorePlugin     7.使用production    8.Scope Hosting