前端工程师面试题|冲刺前端一线大厂面试题(react)持续更新中大厂|面试|前端|java|react面试题

写在前面
CSDN话题挑战赛第1期

活动详情地址：CSDN
参赛话题：前端面试宝典
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！
创作模板：

携手共筑前端面试宝典

题目
- 考点
- 答案
- 扩展

题目 1.react和vue区别
2.react无状态组件和class类组件的区别
3.模仿vue中v-model指令，react实现类似双向绑定
4.react的高阶组件用法以及作用
5.React生命周期
6.React中setState做了什么
7.React组件传值有哪些方式
8.React中什么是纯函数
9.React路由实现原理
10.Redux有哪些参数分别有什么用
考点

重视基础和原理
重视基础和原理
重视基础和原理

答案 1.react和vue区别
vue是双向数据绑定 react是单向数据流 b, 在 Vue 中我们组合不同功能的方式是通过 mixin，而在React中我们通过 HoC (高阶组件） c, 组件传值不同 Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的 d, React 是通过JSX渲染模板而Vue是通过一种拓展的HTML语法进行渲染 e, vue有v-model语法糖等
2.react无状态组件和class类组件的区别
1.直观区别，函数组件代码量较少，相比类组件更加简洁
2.函数组件看似只是一个返回react元素的函数，其实体现的是无状态组件的思想，函数组件中没有this，没有state，也没有生命周期，这就决定了函数组件都是展示性组件，接收props，渲染dom，而不关注其他逻辑
3.因为函数组件不需要考虑组件状态和组件生命周期方法中的各种比较校验，所以有很大的性能提升空间
3.模仿vue中v-model指令，react实现类似双向绑定
通过onchange事件监听input的value值，再通过this.setState改变显示出来
4.react的高阶组件用法以及作用
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件。将几个功能相似的组件里面的方法和react特性（如生命周期里面的副作用）提取到HOC中，然后向HOC传入需要封装的组件。最后将公用的方法传给组件。
5.React生命周期
目前React 16.8 +的生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段。
挂载阶段：
· constructor: 构造函数，最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定this
· getDerivedStateFromProps: static getDerivedStateFromProps(nextProps, prevState),这是个静态方法,当我们接收到新的属性想去修改我们state，可以使用getDerivedStateFromProps
· render: render函数是纯函数，只返回需要渲染的东西，不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容
· componentDidMount: 组件装载之后调用，此时我们可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取消订阅
更新阶段:
· getDerivedStateFromProps: 此方法在更新个挂载阶段都可能会调用
· shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState),有两个参数nextProps和nextState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发重新渲染，false表示不会触发重新渲染，默认返回true,我们通常利用此生命周期来优化React程序性能
· render: 更新阶段也会触发此生命周期
· getSnapshotBeforeUpdate: getSnapshotBeforeUpdate(prevProps, prevState),这个方法在render之后，componentDidUpdate之前调用，有两个参数prevProps和prevState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必须与componentDidUpdate搭配使用
· componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot),该方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统一触发回调或更新状态。
卸载阶段
componentWillUnmount: 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除定时器，取消网络请求或清除在 componentDidMount() 中创建的订阅，清理无效的DOM元素等垃圾清理工作。
6.React中setState做了什么
setState不会立刻改变react组件中state的值，setState通过触发一次组件的更新来引发重汇，多次setState函数调用产生的效果会合并
调用 setState时，React会做的第一件事情是将传递给 setState的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。为此，React将构建一个新的 React元素树（您可以将其视为 UI 的对象表示）。
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较
7.React组件传值有哪些方式
父传子：props子传父：通过在父组件引入的子组件中传递一个函数并传参数，子组件去触发这个函数更改参数完成数据更新
跨多层组件传值：通过context api完成
8.React中什么是纯函数
一个函数的返回结果只依赖其参数，并且执行过程中没有副作用。
9.React路由实现原理
react-router 的依赖库history
1、BrowserHistory：用于支持 HTML5 历史记录 API 的现代 Web 浏览器（请参阅跨浏览器兼容性）
2、HashHistory：用于旧版Web浏览器
3、MemoryHistory：用作参考实现，也可用于非 DOM 环境，如 React Native 或测试
BrowserHistory：pushState、replaceState
HashHistory：location.hash、location.replace
10.Redux有哪些参数分别有什么用
store: 保存数据的地方
State: 状态管理器
Action: 提交state的唯一方法
Reducer：返回新的state纯函数
扩展如果你是一位有抱负的前端程序员并准备面试，那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。
JavaScript 工具缓慢而稳定地在市场中扎根，对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认为是增长最快的 Javascript 框架。
写在最后
【前端工程师面试题|冲刺前端一线大厂面试题(react)持续更新中】CSDN话题挑战赛第1期