react【render函数的原理和触发时机，reactDOM相关】面试题

说说React render方法的原理，在什么时候会触发？

render函数里面可以编写JSX，转化成createElement这种形式，用于生成虚拟DOM，最终转化成真实DOM
在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render
组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state
在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染
所以，一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染

说说React jsx转换成真实DOM的过程

开发者的jsx代码 -> 经过bable编译转化为React.createElement()的调用，生成虚拟dom -> 
虚拟dom通过render方法(ReactDOM.render())对应生成真实dom
也就是说React.createElement()负责生成虚拟domReactDOM.render()将虚拟dom转化为真实dom

说说 Real DOM 和 Virtual DOM 的区别？优缺点？

两者的区别如下：

虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘
虚拟 DOM 的总损耗是“虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”，
真实 DOM 的总损耗是“真实 DOM 完全增删改+排版与重绘”

优缺点:

真实 DOM

优势：
	易用
缺点：
	效率低，解析速度慢，内存占用量过高
	性能差：频繁操作真实 DOM，易于导致重绘与回流

虚拟 DOM

优势：
	简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
	性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
	跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行
缺点：
	在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
	首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢