React高频面试题总结 （附答案及原理代码）

React高频面试题总结 （附答案及原理代码）

1、说说对React的理解？有哪些特性？

1、React是用于构建用户界面的JavaScript库，只提供了UI层面的解决方案，遵循组件设计模式、声明式编程范式和函数式编程概念，使得前端应用程序更加高效。
2、使用虚拟DOM来有效地操作DOM，遵循从高阶组件到低阶组件的单向数据流,帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面。
3、特性：JSX语法、单项数据绑定、虚拟DOM、声明式编程、Component

2、说说React diff算法是怎么运作的？

1、diff算法是为了节省性能而设计的，通过同层级进行比较，不跨层级使得性能更加高效
2、运作流程主要分为三层：tree层、component层、element层
	1、tree层：tree层对于DOM节点的跨层级移动的操作忽略，只对相同层级的DOM节点进行比较，一旦发现节点不存在，直接删除该节点以及以下的所有子节点
	2、component层：遇到同一个类型的组件遵循tree diff，进行层级对比，遇到不同类型的组件，直接将这个不同的组件判断为脏组件，并且替换该组件之下的所有的子节点，当知道这个组件的虚拟DOM没有任何变化，就可以手动使用，shouldComponentUpdate来判断是否需要进行diff，进一步提升了diff效率和性能
	3、element层：低于同一层级，面对全新节点，可以实现插入的操作；面对多余的节点，执行删除操作；面对换位的节点，执行移动的操作

3、 说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

1、React生命周期主要分为三个阶段：创建阶段、更新阶段和卸载阶段
2、创建阶段：
	1、constructor:用来定义状态，或者是用来存放一些this的方法；
	2、getDerivedStateFromProps():将来会使用的，需要返回一个新的对象作为新的state或者返回null表示state状态不需要更新
	3、render()：类组件必须实现的方法，用于渲染DOM结构，可以访问组件state与prop属性
	4、componentDidMount():用于执行一些数据获取，事件监听等操作
3、更新阶段：
	1、getDerivedStateFromProps():将来会使用的，需要返回一个新的对象作为新的state或者返回null表示state状态不需要更新
	2、shouldComponentUpdate：用于告知组件本身基于当前的props和state是否需要重新渲染组件，默认情况返回true
	3、render：类组件必须实现的方法，用于渲染DOM结构，可以访问组件state与prop属性
	4、getSnapshotBeforeUpdate：该周期函数在render后执行，执行之时DOM元素还没有被更新，目的在于获取组件更新前的一些信息，比如组件的滚动位置之类的，在组件更新后可以根据这些信息恢复一些UI视觉上的状态
	5、componentDidUpdate：可以根据前后的props和state的变化做相应的操作，如获取数据，修改DOM样式等
4、卸载阶段：
	componentWillUnmount:此方法用于组件卸载前，清理一些注册是监听事件，或者取消订阅的网络请求等,一旦一个组件实例被卸载，其不会被再次挂载，而只可能是被重新创建

4、说说你对React中虚拟dom的理解？

1、虚拟DOM用js对象的形式，来模拟页面dom的嵌套关系；
2、虚拟DOM是一棵虚拟的JavaScript对象树，画重点，”虚拟的“、”JS对象“，指的是它把真实的网页文档节点，虚拟成一个个的js对象，并以树型结构，保存在内存中。
3、实现原理：通过JS模拟网页文档节点，生成JS对象树(虚拟DOM)，然后再进一步生成真实的DOM树，再绘制到屏幕。如果后面有内容发生改变，React会重新生成一棵全新的虚拟DOM树，再与前面的虚拟DOM树进行比对diff，把差异的部分打包成patch，再应用到真实DOM，然后渲染到屏幕浏览器。

5、 说说你对react hook的理解？

1、Hook是React 16.8.0版本增加的新特性/新语法，可以让你在函数组件中使用 state 以及其他的 React 特性
常见的Hook:
2、useState：跟类组件中state类似，方便我们定义初始化的数据，接收两个参数，一个是初始化数据，另一个是修改数据的方法
3、useEffect：副作用函数，只有使用之后，才会产生副作用，他接受两个参数，一个是函数，另一个是要监听的数据，可以是[]，表示只执行一次，也可以传参，传参之后只要当我们的数据发生变化时才会触发，如果不写，那么发生一次变化就会执行一次
4、useMemo：数据缓存，当我们进行组件通信时，如果我们父组件中的数据发生变化，那么我们的子组件也会随着进行更新，不管我们更新的数据是否跟我们的子组件的数据有关系，他都会进行更新操作，这时候，就会存在更新性能的浪费，我们可以使用usememo来进行缓存，减少不必要的更新操作，他的缓存的参数是一个字符串，如果是一个函数的话，那么我们的usememo就会失效，这时候就需要使用useCallback进行数据的缓存操作
5、useRef：可以监听我们的输入框数据的变化，获取输入框中的值

6、 React组件之间如何通信？

React组件通信就是值组件通过某种方式来传递信息以达到某个目的
	方式：
	1、父组件向子组件传递信息：由于react数据流动是单向的，父组件在调用子组件时，只需要在子组件标签内传递参数，子组件通过props属性接收
	2、子组件向父组件传递信息；父组件向子组件传递一个函数，然后通过这个函数的回调，拿到子组件传过来的值
	3、兄弟组件之间的传递：父组件作为中间层来实现数据的互通，通过使用父组件传递
	4、父组件向后代组件传值：使用context提供的组件通信的一种方式，可以实现数据的共享，Provider组件通过value属性传递给后代组件
	5、非关系组件传递数据：将数据进行一个全局的资源管理，从而实现组件间的通信功能，例如redux

7、 说说你对受控组件和非受控组件的理解？应用场景？

1、受控组件：在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称受控组件。简单说就是收到setState的控制，组件的状态全程响应外部数据
2、非受控组件：表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值），不受setState的控制，一般在初始化的时候接收外部的数据，然后自己在内部存储其自身的状态
应用场景：
	1、受控组件：强制输入格式、一个数据的多个输入、动态输入、提交时的验证问题
	2、非受控组件：一次性取值（提交时）、提交时的验证

8、 说说Connect组件的原理是什么？

1、Connect连接redux和react,包裹在我们容器组件外层，接收上边的Provider提供的store里state和dispatch，传给一个构造函数，返回一个对象，以属性的形式传递给我们的容器组件
2、Connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回Component函数，然后将真正的Component作为参数传入，从而返回一个新的组件

9、说说react 中jsx语法糖的本质？

1、Jsx的本质就是函数React.createElement的语法糖，所有的jsx语法都会最终经过babel.js转化为React.createElement这个函数调用
2、三个参数：type是指的当前的元素类型，config是jsx属性，以对象的属性和值的形式存储，children是存放在标签中的内容
3、jsx写法：必须引入babel并且设置script标签的type为text/bable babel:将jsx转化为React.createElement()这种函数的调用

10、说说你对redux中间件的理解？常用的中间件有哪些？实现原理？

1、Redux中间件就是介于应用系统和系统软件之间的一类软件，使用系统软件提供的基础服务，衔接网络上应用系统的各个部分或者是不同的应用，达到资源共享，功能共享的目的
2、常用的中间件：redux-thunk用于异步操作、redux-logger用于日志的记录

实现原理：所有中间件被放进一个数组中嵌套执行，判断传递过来的数据类型&#x