2021年React常见的面试题以及答案(持续更新中...)

React常见的面试题以及答案

• 说说对React的理解？有哪些特性？
• 区分Real DOM和Virtual DOM
• 什么是JSX和它的特性？
• 类组件和函数组件之间有什么区别？
• 了解 Virtual DOM 吗？解释一下它的工作原理。
• 说说对 State 和 Props的理解，有什么区别？
• 说说对React refs 的理解？应用场景？
• setState是同步还是异步
• super()和super(props)有什么区别？
• 说说对React事件机制的理解？
• React事件绑定的方式有哪些？区别？
• React组件生命周期有几个阶段
• 详细解释 React 组件的生命周期方法
• react在哪个生命周期做优化
• 受控组件和非受控组件的区别
• React组件事件代理的原理
• 为什么虚拟 dom 会提高性能
• React中的key有什么作用？
• react的diff算法是怎么完成的
• react组件之间如何通信
• 什么是高阶组件？
• 说说对React Hooks的理解？解决了什么问题？
• 说说react中引入css的方式有哪几种？区别？
• 在React中组件间过渡动画如何实现？
• React context是什么？
• 说说你对Redux的理解？其工作原理？
• Redux遵循的三个原则是什么？
• 数据如何通过 Redux 流动？
• react-redux的两个最主要功能?
• Redux中异步的请求怎么处理
• 介绍Redux中间件
• 你在React项目中是如何使用Redux的? 项目结构是如何划分的？
• 为什么 React Router 中使用 Switch 关键字 ？

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

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

特性

• JSX语法
• 单向数据绑定
• 虚拟DOM
• 声明式编程
• Component(组件化)

优势

• 高效灵活
• 声明式的设计，简单使用
• 组件式开发，提高代码复用率
• 单向响应的数据流会比双向绑定的更安全，速度更快

区分Real DOM和Virtual DOM

Real DOM

• Real DOM，真实DOM， 意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构
• 更新缓慢
• 可以直接更新 HTML
• 如果元素更新，则创建新DOM
• DOM操作代价很高
• 消耗的内存较多

Virtual DOM

• Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应
• 更新更快
• 无法直接更新 HTML
• 如果元素更新，则更新 JSX
• DOM 操作非常简单
• 很少的内存消耗

什么是JSX和它的特性？

JSX 是JavaScript XML的缩写，不是html或xml，基于ECMAScript的一种新特性，一种定义带属性树结构的语法；

特性：

• 自定义组件名首字母大写
• 嵌套；在render函数中return返回的只能包含一个顶层标签，否则也会报错。
• 求值表达式；JSX基本语法规则，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析
• 驼峰命名
• class属性需要写成className
• JSX允许直接在模板插入JS变量。如果这个变量是一个数组，则会展开这个数组的所有成员
• 在JSX中插入用户输入是安全的，默认情况下ReactDOM会在渲染前，转义JSX中的任意值，渲染前，所有的值都被转化为字符串形式，这能预防XSS攻击。

类组件和函数组件之间有什么区别？

类组件：

• 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。
• 所有 React 组件都必须是纯函数，并禁止修改其自身 props。
• React是单项数据流，父组件改变了属性，那么子组件视图会更新。
• 属性 props是外界传递过来的，状态 state是组件本身的，状态可以在组件中任意修改
• 组件的属性和状态改变都会更新视图。