react的理解

1.说说你对react的理解？有哪些特性？

React是一个简单的javascript UI库，用于构建高效、快速的用户界面。

它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。

它使用虚拟DOM来有效地操作DOM。

它遵循从高阶组件到低阶组件的单向数据流。

React特性有很多，如：

• JSX语法

• 单向数据绑定

• 虚拟DOM

• 声明式编程

• Component

  优势

• 通过上面的初步了解，可以感受到React存在的优势：

• 高效灵活

• 声明式的设计，简单使用

• 组件式开发，提高代码复用率

• 单向响应的数据流会比双向绑定的更安全，速度更快

2.说说Real diff算法是怎么运作的？

跟Vue一致，React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，使我们的页面的构建效率提到了极大的提升

而diff算法就是更高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处

原理

react中diff算法主要遵循三个层级的策略：

• tree层级

• conponent 层级

• element 层级

tree层级

DOM节点跨层级的操作不做优化，只会对相同层级的节点进行比较

只有删除、创建操作，没有移动操作

conponent层级

如果是同一个类的组件，则会继续往下diff运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的

element层级

对于比较同一层级的节点们，每个节点在对应的层级用唯一的key作为标识

提供了 3 种节点操作，分别为 INSERT_MARKUP(插入)、MOVE_EXISTING (移动)和 REMOVE_NODE (删除)

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

生命周期（Life Cycle）的概念应用很广泛，特别是在经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程

React整个组件生命周期包括从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程

这里主要讲述react16.4之后的生命周期，可以分成三个阶段：

• 创建阶段

• 更新阶段

• 卸载阶段

创建阶段

• constructor

• getDerivedStateFromProps

• render

• componentDidMount

constructor

实例过程中自动调用的方法，在方法内部通过super关键字获取来自父组件的props

在该方法中，通常的操作为初始化state状态或者在this上挂载方法

getDerivedStateFromProps

该方法是新增的生命周期方法，是一个静态的方法，因此不能访问到组件的实例

执行时机：组件创建和更新阶段，不论是props变化还是state变化，也会调用

在每次render方法前调用，第一个参数为即将更新的props，第二个参数为上一个状态的state，可以比较props 和 state来加一些限制条件，防止无用的state更新

该方法需要返回一个新的对象作为新的state或者返回null表示state状态不需要更新

render

类组件必须实现的方法，用于渲染DOM结构，可以访问组件state与prop属性

注意： 不要在 render 里面 setState, 否则会触发死循环导致内存崩溃

componentDidMount

组件挂载到真实DOM节点后执行，其在render方法之后执行

此方法多用于执行一些数据获取，事件监听等操作

更新阶段

• getDerivedStateFromProps

• shouldComponentUpdate

• render

• getSnapshotBeforeUpdate

• componentDidUpdate

shouldComponentUpdate

用于告知组件本身基于当前的props和state是否需要重新渲染组件，默认情况返回true

执行时机：到新的props或者state时都会调用，通过返回true或者false告知组件更新与否

一般情况，不建议在该周期方法中进行深层比较，会影响效率

同时也不能调用setState，否则会导致无限循环调用更新

getSnapshotBeforeUpdate

该周期