React 重点面试题
1、说说对React的理解,有哪些新特性
是什么?
React,用于构建用户界面的JavaScript库,提供了UI界面
的解决方案,遵循组件设计模式、声明式编程范式和函数式编程概念,使用虚拟DOM来有效的操作真实DOM
,遵循从高阶组件到低阶组件
的单向数据流
,帮助我们将界面分成了各个小的块,每一块就是一个组件,这些组件之间嵌套、组件,构成整个界面。
特性
- JSX语法
- 单向数据流
- 虚拟DOM
- 声明式编程
- Component(组件化)
优势
- 声明式的设计,使用简单
- 高效灵活
- 组件式开发
- 单向响应的数据流,会比双向绑定更加安全,速度更快。
2、Real DOM 与 虚拟DOM(Virtual Dom)的区别
真实 DOM
- 真实DOM,就是文档对象模型,页面上每一个节点都是一个真实DOM结构
- 操作真实DOM,可以直接更新HTML
- 更新缓慢
- DOM操作代价大
- 非常消耗内存
虚拟DOM
- Virtual Dom,本质是一个JavaScript对象形式存在的对DOM的描述,目的就是为了将虚拟DOM渲染到页面上去,与真实DOM一一对应
- 更新速度快
- 无法直接更新HTML
- DOM操作简单
- 内存消耗很少
3、什么是JSX? 有哪些特性?
定义:
JSX
是 JavaScript XML 的缩写,不是html/xml,
基于ECMAScript
的一种新特性,是一种带树结构的语法
特性:
- 自定义组件名
首字母大写
- 嵌套;在
render函数
中return返回的只能包含一个顶层标签
,否则也会报错。
求值表达式; JSX
基本语法规则,遇到HTML标签(以<开头),就用HTML规则解析;遇到代码块(以{开头),就用JS规则解析
- 驼峰命名
class
属性需要写成className
JSX
允许直接在模板插入JS变量
。如果这个变量是一个数组,则会展开这个数组的所有成员- 在
JSX中插入用户输入是安全的
,默认情况下ReactDOM
会在渲染前,转义JSX
中的任意值,渲染前,所有的值都被转化为字符串形式,这能预防XSS
攻击。
4、说说虚拟DOM的工作原理
Virtual DOM 是一个JavaScript对象
,最开始是真实DOM 的一个副本
。是一个树节点,将元素、元素的属性以及内容作为对象极其对象的属性。
**Virtual DOM 工作时的三大步骤: **
- 只要底层数据发生改变,整个UI都会在虚拟DOM中重新绘制。
- 然后计算对比出旧DOM与新DOM之间的差异。
- 将实际更改的DOM内容更新到真实DOM即可。
5、说说对State和Props的理解,有何区别?
State
- 每个组件所显示形态均有其状态和参数决定,数据状态就是
State
,类组件中初始化State
在其constructor
中。 - 修改状态则要通过
setState
来改变,其可以达到更新组件内部的数据,同时重新调用组件render
方法。 setState
还可以接受第二个参数,它是一个函数,会在setState
调用完成并且组件开始重新渲染时被调用,可以用来监听渲染是否完成
。
Props
- React的
核心思想
就是组件化思想
,页面会被切分成一些独立的、可复用的组件,组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props
,所以可以把props理解为从外部传入组件内部的数据
。 - react具有
单向数据流
的特性,所以他的主要作用是从父组件向子组件中传递数据
props
除了可以传字符串,数字,还可以传递对象,数组甚至是回调函数- 在子组件中,
props在内部不可变的
,如果想要改变它看,只能通过外部
组件传入新的props来重新渲染子组件
,否则子组件的props和展示形式不会改变。
相同点
- 两者都是 JavaScript 对象
- 两者都是用于保存信息
- props 和 state 都能触发渲染更新
区别
- props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化
- props 在组件内部是不可修改的,但 state 在组件内部可以进行修改
- state 是多变的、可以修改
6、setState是同步还是异步?
setState
本身是同步的
不是异步的,之所以会有异步表现形式,根本原因是react框架本身的性能机制
所导致的,因为每次调用setState
均会触发更新,异步操作是为了提高性能,react将多个更新合并到一起
,减少render的次数
。
实现同步
setState
提供了一个回调函数,在回调函数中,可以实时获取到更新之后的数据
。
state = {
number = 1
};
componentDidMount(){
this.setState({number:6},()=>{
console.log(this.state.number) //6
})
}