前端面试题整理—React篇

Posted 2021-02-15 theblogs

1、说一下React

　　React是Facebook 开发的前端javascript库

　　V层：react并不是完整的MVC框架，而是MVC中的C层

　　虚拟DOM：react引入虚拟DOM，每当数据变化通过reactdiff运算，将上一次的虚拟DOM与本次渲染的DOM进行对比，仅仅只渲染更新的，有效减少了DOM操作

　　JSX语法：js+xml，是js的语法扩展，编译后转换成普通的js对象

　　组件化思想：将具有独立功能的UI模块封装为一个组件，而小的组件又可以通过不同的组合嵌套组成大的组件，最终完成整个项目的构建

　　单向数据流：指数据的流向只能由父级组件通过props讲数据传递给子组件，不能由子组件向父组件传递数据

　　要想实现数据的双向绑定只能由子组件接收父组件props传过来的方法去改变父组件数据，而不是直接将子组件数据传给父组件

　　生命周期：简单说一下生命周期：Mounting(挂载)、Updateing(更新)、Unmounting(卸载)

 

2、什么是JSX？为什么浏览器无法读取JSX

　　JSX 是JavaScript XML 的简写，是 React 使用的一种文件

　　它利用 JavaScript 的表现力和类似 html 的模板语法

　　使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能

 

　　浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX

　　所以为了使浏览器能够读取 JSX，首先，需要用Babel转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器

 

3、React与Angular有何不同？

　　react是Facebook出品，angular是Google

　　react只有MVC中的C，angular是MVC

　　react使用虚拟DOM，angular使用真实DOM

　　react是单项数据绑定，angular是双向数据绑定

 

4、react生命周期函数

　　（1）Mounting挂载阶段

　　constructor()

　　componentWillMount()组件挂载到页面之前

　　render()创建虚拟DOM，进行diff运算，更新DOM树。不可进行setState()

　　componentDidMount()组件挂载到页面之后，可以在此请求数据

　　（2）Updateing更新阶段

　　componentWillReceiveProps()父级数据发生变化

　　shouldComponentUpdate()

　　性能优化：这个函数只返回true或false，表示接下来的组件是否需要更新（重新渲染）

　　返回true就是紧接着以下的生命周期函数，返回false表示组件不需要重新渲染，不再执行任何生命周期函数（包括render）

　　componentWillUpdate() 组件更新之前，不可进行setState() 会导致函数调用shouldComponentUpdate从而进入死循环

　　render()

　　componentDidUpdate()组件更新之后

　　（3）Unmounting卸载阶段

　　componentWillUnmount 组件卸载和销毁之前立刻停用

　　可以在此销毁定时器，取消网络请求，消除创建的相关DOM节点等

 

5、shouldComponentUpdate是做什么的，（react性能优化是哪个周期函数？）

　　shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新绘制dom

　　因为DOM的描绘非常消耗性能，如果我们能在shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能

 

6、为什么虚拟 DOM 会提高性能?

 　　虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能