前端面试题 react篇

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

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

特性：函数式编程 jsx语法 组件化开发模式 虚拟dom 单项数据绑定

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

Diff算法是为了节省性能而设计的，diff算法和虚拟dom的结合。

基本流程：在第一次render在执行的时候会将第一次的虚拟DOM做依次缓存，当第二次渲染时会将新的虚拟DOM和旧的虚拟DOM进行比较，计算出虚拟DOM中真正发生变化的部分，从而值针对变化的部分进行更新渲染，避免造成性能的浪费 
 

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

挂载阶段：

constructor():在react组件挂载之前，会调用它的构造函数
ComponentWillMount():在render()方法之前调用，并且在初始化挂载及后续更新时都会被调用
ComponentDidMount():在挂载之后（插入dom树中）立即调用
更新阶段：

componentWillReceiveProps():在接收父组件改变后的props需要重新渲染组件时使用的比较多，外部组件频繁的时候会导致效率会比较低
ShouldComponentUpdate():用于控制组件重新渲染的流程，在这return false 可以阻止组件的更新
Render()：render()方法是class组件当中唯一必须实现的方法
ComponentWillUpdate():ShouldComponentUpdate()返回true后，组件进入重新渲染之前进入这个函数
ComponentDidUpdate():每次改变state重新渲染页面后都会进入到这个生命周期
卸载销毁阶段

ComponentWillUnmount():在此完成组件的卸载和数据的销毁

4. 说说你对React中虚拟dom的理解？

虚拟dom不会进行排版和重绘的操作，我们使用虚拟dom来减少对真实dom的操作，可以达到使用虚拟dom提高性能，但是在首屏需要加载大量的dom时使用虚拟dom就会比不使用虚拟dom的速度要慢，因为虚拟dom会对真实dom进行一次对比

5.说说你对react hook的理解？

可以使用hooks从组件中提取状态逻辑，让这些逻辑可以单独测试并且hooks使我们在无需修改组件结构的情况下复用状态逻辑，hooks将组件中互相关联的部分拆解成更小的函数，还可以使用reducer来管理组件内部状态让其更可预测，hooks让我们在非class组件的情况下使用更多的react的特性

6.React组件之间如何通信？

组件之间的通信分为父传子通信，子传父通信，非父子组件通信

父传子：在父组件中的子组件标签上绑定自定义属性，挂载传递的数据
子组件中props接收传递过来的数据，直接使用即可

子传父：父组件中子组件标签上绑定一个属性，传递一个方法给子组件
子组件中通过props接收这个方法，直接调用，传递相应的参数就可以

非父子组件的通信：状态提升（中间人模式），context状态树

状态提升：react中的状态提升就是将多个组件需要共享的状态提升到他们最近的父组件当中，在父组件上改变这个状态然后通过props发给子组件
Context状态树：在父组件中我们通过createContext()创建一个空对象，在父组件的最外层我们使用Provider包裹数据，通过value绑定要传递的对象数据

7.说说你对受控组件和非受控组件的理解？应用场景？

受控组件：由react控制的输入表单元素而改变其值的方式叫做受控组件
应用场景：比如表单元素input绑定一个onChange事件，当input状态发生变化时就会触发onChange事件，从而更新组件state

非受控组件：非受控组件就是指，表单数据由DOM本身处理，即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值，在非受控组件中，可以使用ref来从DOM获取表单值