做外贸免费的网站有哪些,网站如何绑定域名,合肥效果好的网站推广,加强和改进网站建设建设方案本章内容 目录 一、为什么需要”虚拟DOM“二、虚拟 DOM“ 带来的希望三、虚拟 DOM“ 的优势#xff08;性能大幅度提升 跨端应用#xff09; 上一节我们讲了 state、props与render函数的关系#xff0c;本节内容开始了解 React中的”虚拟 DOM“ 相关知识。
一、为什… 本章内容 目录 一、为什么需要”虚拟DOM“二、虚拟 DOM“ 带来的希望三、虚拟 DOM“ 的优势性能大幅度提升 跨端应用 上一节我们讲了 state、props与render函数的关系本节内容开始了解 React中的”虚拟 DOM“ 相关知识。
一、为什么需要”虚拟DOM“
上篇文章我们知道当组件的 state或者 props变化时render函数会重新知己界面也重新被渲染。然而我们要知道页面的重新渲染这个过程是非常耗性能的。假设没有 React, 我们要实现数据变化界面也随着变化通常可以这么做
方式一
1、定义一个 state 数据
2、定义一个 ”JSX模版“
3、将”数据JSX模版“结合生成真实 DOM 来显示
4、当数据变化时
5、”数据JSX模版“相结合生成真实DOM,替换原始 DOM
6、如此往复循环 4、5步骤方式二对方式一进行优化下不直接替换旧的 DOM只替换变化的数据节点
1、定义一个 state 数据
2、定义一个 ”JSX模版“
3、将”数据JSX模版“结合生成真实 DOM 来显示
4、当数据变化时
5、”数据JSX模版“相结合生成真实 DOM
6、新的 DOM 和旧 DOM比对找到只变化的节点
7、用新 DOM 变化的节点替换旧 DOM 变化处的节点
8、如此往复循环 5、6、7步骤方式二相对于方式一的步骤增加了但是性能会有所提升局部替换比整体替换消耗的性能更少但是方式二的比较过程同样耗费了些性能这样来看性能也没提升多少二、虚拟 DOM“ 带来的希望 基于上述的痛点React提出了”虚拟 DOM“的方案。也就是方式三: 1、定义一个 state数据
this.state {content: hello
}2、定义一个 JSX 模版
render() {return (div idd1span{content}/span/div)
}3、”数据JSX模版“结合React底层会调用 React.createElement()接口将 JSX 模版变成一个原始的”虚拟DOM“虚拟DOM 本质是一个数组形式的 JS对象用它来描述”真实的DOM“
虚拟 DOM 格式[标签名标签属性标签的子节点]注意如果标签子节点又是一个完整的 DOM那么还是遵循 ”[标签名标签属性标签的子节点]“ 的格式
那将 2中的”JSX模版“转为”JS对象“的底层实现。运行后发现我们可以通过 React.createElement()来实现 JSX的功能。唯一的缺点就是很复杂所以这也是为什么 JSX存在的原因它是一个更加简便好用的方式
// 1、注释掉这里改用下面的 React.createElement方式实现
// render() {
// return (
// div idd1
// span{content}/span
// /div
// )
// }// 2、使用 React.createElement方式实现上面注释的功能
render() {// 我们将“JSX 模板”用 craeteElement 方法来改写其接收 3 个参数依次是元素的标签名、标签的属性、元素的children 子节点return React.createElement(div, {id: d1, React.createElement(span, {}, hello)})
}上面生成的”虚拟DOM“为[div, {id: d1}, [span, {}, hello]]
4、根据上面的”虚拟DOM“生成”真实DOM“ div idd1span{content}/span/div5、当数据 state变化
this.state {content: hello world
}6、重复 3步骤生成新的”虚拟DOM“: [div, {id: d1}, [span, {}, hello world]] 7、比较”旧的虚拟DOM“和”新的虚拟DOM“找到 span中的内容是有变更的 8、直接操作 DOM改变 span里的内容
三、虚拟 DOM“ 的优势性能大幅度提升 跨端应用 ”虚拟DOM“本质上是用 JS生成的一个 JS对象这个转变消耗的性能较少。如果直接使用 JS生成一个 DOM元素那么它是会底层调用 Web Application的API,性能消耗极大 然后两个”虚拟DOM“之间比对本质是 js对象的比对其底层使用的”Diff算法“是不怎么消耗性能的。如果直接把两个”真实 DOM“进行比对其性能消耗极大 ”JS 对象“不仅可以让”浏览器“识别在原生应用Android IOS上也可以注意”原生应用“里不存在 DOM的概念所以真实的 DOM在原生应用中不被识别无法使用因此有了”虚拟DOM“后我们用它生成一些原生组件。 这样的话在复用”state“、”JSX模版“等代码优势下让”虚拟DOM“在不同”端“中进行转化网页端转化为”真实DOM“原生应用中转化为原生的”组件“
到此本章内容结束
