React 重点面试题（一）

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 工作时的三大步骤： **

1. 只要底层数据发生改变，整个UI都会在虚拟DOM中重新绘制。
2. 然后计算对比出旧DOM与新DOM之间的差异。
3. 将实际更改的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
    })
}