关于React知识点

虚拟DOM

一、虚拟DOM之前

1.state 数据
2.JSX 模板
3.数据 + 模板 结合，生成真实DOM，来显示
4.state 发生改变
5.数据 + 模板 结合，生成真实DOM，替换原始DOM
缺陷 ：第一次生成完整真实DOM片段，第二次替换，非常消耗性能

二、第一次优化

更改 ：第二次生成新DOM,和第一次对比，找出不同点，替换更改的DOM中元素（缺陷：提升不明显）

虚拟DOM诞生

所以提出虚拟DOM
虚拟DOM：就是js对象，用来描绘真实DOM
真实DOM

<div id="abc"><span>hello world</span></div>

虚拟DOM(可以理解为数组或者对象)

['div',{id:'abc'},['span',{},'hello world']]

结论 虚拟DOM就是js对象，比较js对象比比较DOM极大的提高性能
底层真实是先生成虚拟DOM在生成真实DOM
JSX -> createElement -> JS对象 -> 真实DOM

return <div>item</div>

等价于 下面的更接近底层

return React.createElement('div',{},'item')

虚拟DOM优点
1.性能提升
2.它使跨端应用得以实现 React Navtive

虚拟DOM的Diff算法

两个虚拟DOM的比对 同级比较
如果第一级就不同，下面的都不比较，直接重新渲染
将节点循环，并且赋key值，所以最好不用index，因为index可能发生变化
可以用item（内容）当key值
setState也有性能优化，如果短时间有多个setState，就会执行一次

React中ref使用

ref={(input) => {this.input = input}}input(dom节点) 帮助我们直接获取dom元素
此时this.input = e.target //不建议，因为和setState一起用，有个坑，setState是个异步函数，不会立即执行
setState(()=>{},()=>{})第二个函数代表异步执行完成之后才会执行