前端编程课件09-React全家桶实战.pdf

09-React全家桶实战-常⻅⾯试题

/post/6940942549305524238

React基础

1什么是React？

React是Facebook在2013年开源的JavaScript框架。

官⽅对它的解释是：⽤于构建⽤户界⾯的JavaScript库。

现今React和Vue是国内最为流⾏的两个框架，都是帮助我们来构建⽤户界⾯的JavaScript库。

React的特点和优势

React的特点：

声明式编程：

声明式编程是⽬前整个⼤前端开发的模式：Vue、React、Flutter、SwiftUI；

它允许我们只需要维护⾃⼰的状态，当状态改变时，React可以根据最新的状态去渲染我们的

UI界⾯；

组件化开发：

组件化开发⻚⾯⽬前前端的流⾏趋势，我们会讲复杂的界⾯拆分成⼀个个⼩的组件；

如何合理的进⾏组件的划分和设计也是后⾯我会讲到的⼀个重点；

多平台适配：

2013年，React发布之初主要是开发Web⻚⾯；

2015年，Facebook推出了ReactNative，⽤于开发移动端跨平台；（虽然⽬前Flutter⾮常⽕

爆，但是还是有很多公司在使⽤ReactNative）；

2017年，Facebook推出ReactVR，⽤于开发虚拟现实Web应⽤程序；（随着5G的普及，VR

也会是⼀个⽕爆的应⽤场景）；

React的优势

React由Facebook来更新和维护，它是⼤量优秀程序员的思想结晶：

React的流⾏不仅仅局限于普通开发⼯程师对它的认可，⼤量流⾏的其他框架借鉴React的思想；

Vue.js框架设计之初，有很多的灵感来⾃Angular和React。

包括Vue3很多新的特性，也是借鉴和学习了React

⽐如ReactHooks是开创性的新功能（也是我们课程的重点）

VueFunctionBasedAPI学习了ReactHooks的思想

Flutter的很多灵感都来⾃React，Flutter中的Widget–Element–RenderObject，对应的就是JSX–虚

拟DOM–真实DOM。

所以，可以说React是前端的先驱者，它会引领整个前端的潮流。

4.什么是JSX？

JSX是⼀种JavaScript的语法扩展（eXtension），也在很多地⽅称之为JavaScriptXML，因为看起

就是⼀段XML语法；

它⽤于描述我们的UI界⾯，并且其完全可以和JavaScript融合在⼀起使⽤；

它不同于Vue中的模块语法，你不需要专⻔学习模块语法中的⼀些指令（⽐如v-for、v-if、v-else、

v-bind）；

JSX转换的本质是什么？

实际上，jsx仅仅只是React.createElement(component,props,...children)函数的语

法糖。

所有的jsx最终都会被转换成React.createElement的函数调⽤。

为什么React选择了JSX？

React认为渲染逻辑本质上与其他UI逻辑存在内在耦合

⽐如UI需要绑定事件（button、a原⽣等等）；

⽐如UI中需要展示数据状态，在某些状态发⽣改变时，⼜需要改变UI；

他们之间是密不可分，所以React没有将标记分离到不同的⽂件中，⽽是将它们组合到了⼀起，这

个地⽅就是组件（Component）；

React为什么采⽤虚拟DOM？

为什么要采⽤虚拟DOM，⽽不是直接修改真实的DOM呢？

很难跟踪状态发⽣的改变：原有的开发模式，我们很难跟踪到状态发⽣的改变，不⽅便针对我们应

⽤程序进⾏调试；

操作真实DOM性能较低：传统的开发模式会进⾏频繁的DOM操作，⽽这⼀的做法性能⾮常的低；

虚拟DOM帮助我们从命令式编程转到了声明式编程的模式。

虚拟DOM有利于实现跨平台的能⼒，即⼀套代码可以打包出各个平台的应⽤。

Raect事件函数绑定this有⼏种⽅式？

⽅案⼀：bind给btnClick显示绑定this

在传⼊函数时，我们可以主动绑定this：

buttononC