前端常见面试题

1、map和forEach的区别？

map和forEach都是对数组的遍历，但是他们是有区别的，forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

例如，在react经常需要使用数据进行渲染元素的时候，那么这时候，我们就需要使用map了,返回一个新的元素的数组进行渲染。而forEach就是不需要返回新的数据，需要在原数组的每一项上修改的时候，我们经常会用到。

2、redux的工作流程？

简明来说，首先创建一个store分别管理相应的reducer,在组件内部派发action之后，看是否需要中间件进行处理，如果是ajax等异步操作，可以放入thunk或者saga等中间件，进行处理之后然后传到reducer之中，如果组件里面需要数据,可以通过connect高阶组件或者getState()获取reducer里面的数据。

 

3、容器组件和UI组件的区别

容器组件里面有逻辑操作，可以提供数据和行为给UI组件，并且容器组件时有状态的
UI组件时无状态的，只可以通过props去接受数据，主要用来展示组件内容，是无状态的

4、react中context的使用？

context，通过createContext创建一个context，在所有组件的最外层包裹一个provider,然后通过给provider绑定数据以及方法，然后后代组件可以通过tatic contextType 或者consumer来获取context里面的值，如果是consumer的话，那么就是使用一个回调函数，回调函数的参数就是context的值

5、React路由加载的几种方式？

路由组件的加载一共有三种方式，component\render\children
component可以直接引入组件名，也可以通过一个回调函数去引入一个组件
render只可以通过回调函数引入组件
children和render一样也是通过一个回调函数组件，但是children引入的组件，无论路径是否匹配都显示引入的组件，最后通过match对象的match属性去对应相应的路由，常用于高亮效果等！

6、提供网页加载速度的方式？（优化）

1、首先可以减少http的请求
2、首页可以使用服务端渲染
3、懒加载图片
4、添加Expires请求头，缓存http访问的组件，下次访问的时候减少不必要的http请求，提高加载速度。
5、使用CDN，减小服务器负担
6、启用GZIP压缩，压缩必要资源，从而给用户发送最小的HTML文件和CSS/JS等资源