React常见面试题

一：函数组件和类组件

1：React组件之间如何通信

                兄弟之间通讯，父子组件之间通讯，跨组件通讯

2：JSX本质是什么

                JSX本质是一个语法糖

3：说一下shouldComponentUpdate的用途

                对数据state状态进行改变

4：context是什么

                context是一个运行环境

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

                事件触发Dispatch派发到state，state深拷贝再通过reducer修改数据自动回显

6：React类组件的setState是同步操作还是异步操作

                不是单纯的同步或异步操作

7：什么是纯函数组件

                是函数式编程的基础

8：介绍下React组件生命周期

                constructor创建组件时最先执行，render每次渲染都触发，componentdidMount组件挂载后完成

9：React发起ajax应该在哪个生命周期

                在componentDidMount生命周期中发起

10：渲染列表，为何使用key

                key可以帮助react更快的更新

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

                函数组件和class组件的区别在于class组件是有状态的，而函数组件是无状态的

12：什么是受控组件，什么是非受控组件

                受控组件是通过setState的形式控制输入的值，非受控组件是通过dom的形式更新值可以通过ref的形式获取

13：何时使用异步组件

                 当程序在对象上调用一个花费很长时间执行的方法，并且不希望程序等待时使用

 14:多个组件有公共逻辑，如何抽离

                使用高阶组件或者Render Props 进行抽离

15：Redux如何进行异步请求

                安装依赖创建异步函数 或创建Redux  State函数

16：React-router如何配置懒加载

                使用React解构的Lazy配置

17：什么是PureComponent

                组件更新时，如果Prop是和satet都没有发生改变，render就不会触发，省去对比过程，达成提升性能的目的

18：React事件和Dom事件有什么区别

                React事件没有绑定在React组件对应的原生Dom节点上

19：React性能优化方式有那些

                将多个生命周期整合成Hooks来使用

20：说一下React和Vue的区别

                核心思想不同，组件写法差异，diff算法不同

二：React hooks

1：列举十个常用的React内置hooks

                 useRef,useState,useCallback,useEffect,useReactive,UseEventlistener,useTimeOut,useIntval,useCountDown,useHover

2:为什么会有ReactHooks,它解决了哪些问题

                函数组件比起类组件“少”了很多东西，比如生命周期、对 state 的管理等。 这就给函数组件的使用带来了非常多的局限性。 React-Hooks 的出现，就是为了帮助函数组件补齐这些（相对于类组件来说）缺失的能力

3：React Hooks如何模拟组件的生命周期

                  引入 hooks 的函数组件功能越来越完善，在多数情况下，我们完全可以使用 hook 来替代 class 组件。并且使用函数组件也有以下几点好处。

                纯函数概念，同样的 props 会得到同样的渲染结果。

                可以使用函数组合，嵌套，实现功能更加强大的组件。

                组件不会被实例化，整体渲染性能得到提升。

4：如何自定义Hook

                单一职责原则，明确的函数签名

5：说一下React Hooks性能优化

                React Hooks是一种新的API,它可以替代传统的生命周期方法。 它们提供了一种更简洁、更灵活的方式来管理组件的状态和行为。

6：使用React Hooks遇到哪些坑

                1.更新state的函数会直接替换state，而不是像以前setState会合并新老state

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

                

7：Hooks相比HOC和RenderProp有哪些优点

                Hooks 可以优化 render 的前置逻辑处理，也适合用于取代 class extend 的写法； HoC 更多是个从外注入的方案，也适合用来做插件； Render Props 可以在树状 VDOM 的渲染流程上有更多的自由度

三：webpack面试真题

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

                优化前端兼用型管理   处理器支持等     懒加载

2：module chunk bundle的区别        

                同一份逻辑在不同场景的不同逻辑

3：loader和plugin的区别

                loader本质就是一个函数，在该函数对接收到的内容进行转换，返回转换后的结果。

                plugin可以扩展 webpack 的功能，让 webpack 具有更多的灵活性

4：常用的loader和plugin有哪些

                file-loader  url-loader  image-loader   babel-loader   css-loader   style-loader

5：Babel和webpack的区别

                babel主要做es语法的转换，确保最新的来的es特性能够以最快的速度deliver到开发者手中， 但是不负责模块的组合。

                webpack更多的是将输入的各个模块用自己内部的一套逻辑将代码“链接”起来

6：说一下Babel-polyfill和babel-runtime的区别

                在功能上都是模拟了一个ES6+的环境，支持代码中使用新增API特性；在外部依赖上，有两个相同的核心依赖包。 但在实现方式上两者区别很大，一个简单全面，另一个精致优雅，各有长短，适用不同的应用场景

7：webpack如何实现懒加载

                懒加载的原理是利用了webpack的代码分割，它使用 异步加载 的方式去导入代码

8：为何Proxy不能被Polyfill

                由于ES5的限制，ES6新增的Proxy无法被转译成ES5，或者通过Polyfill提供兼容。
ES5中无法实现自定义对象的读取属性、属性赋值等行为，然而对于函数调用与实例化，通过对原函数对象进行代理，是可以实现Polyfill兼容的。

9：webpack如何优化构建速度

                优化Loader配置

                优化resolve.modules配置

10：webpack如何优化产出代码

                懒加载，将较大的文件异步加载

                提取公共代码

                使用IngorePlugin

                使用CDN加速