react中的核心概念

DOM：浏览器中提供的概念；

虚拟DOM：框架中的概念；需要开发框架的程序员手动用JS对象来模拟DOM元素和嵌套关系；

本质：用JS对象，模拟DOM树；
目的：实现页面的按需更新；

要求：点击列头，实现按需排序；

1. 数据从哪儿来：从数据库查询而来

2. 数据存放在哪：浏览器内存中以对象数组形式表示

3. 如何渲染到页面：

方案1：手动for循环整个数组。str+='<tr></tr>'
方案2：使用模板引擎。atr-template;（与方案1没有本质的区别，只是方便）

上述方案，存在性能上的缺陷：每次排序后，都需要重新渲染整个页面（包括没有发生变化的行）。

虚拟DOM

如何实现按需更新？

获取内存中的新旧两棵DOM树进行对比，得到需要被按需更新的DOM树

如何获取新旧DOM树？

分析：浏览器中没有提供直接获取DOM树的API；

方法：我们可以手动模拟新旧DOM树

如何模拟DOM树？

用JS对象，通过children嵌套DOM元素，构成DOM树

<ul id="list"><li class="item">item</li>
</ul>

var ul={tagName:'ul',attrs:{id:'list'},  children:[    {      tagName:'li',      attrs:{        class:'item'      },      children:['item']    }  ]
}

diff算法

tree diff：新旧DOM树，逐层对比的过程
component diff：进行tree diff时，每一层中，组件级别的对比
element diff：进行组件对比时，如果两个组件类型相同，则继续进行元素对比

转载于:https://www.cnblogs.com/embrace-ly/p/10605535.html

react中的核心概念相关推荐

2021年大数据ELK（五）：Elasticsearch中的核心概念
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录系列历史文章 Elasticsearch中的核心概念一.索引 index 二 ...
数据分析中的核心概念概述
数据分析包含了数据检查.清洗.变换和建模等流程,借助数据分析,我们可以从数据中获取有用的信息. 在现代生活中,数据分析无处不在:它有助于技术的改进,软件的构建以及产品的发展. 本文首先会介绍数据分析的 ...
React官网核心概念模块知识点整理（一）
react版本:16.13.1 React 会将以小写字母开头的组件视为原生 DOM 标签,所以自定义组件名称规范是大写字母开头. JSX 里的 class 变成了 className JSX 防止注 ...
kafka中的核心概念
目录 1.kafka中涉及的名词 2.kafka功能 3.kafka中的消息模型 4.大概流程 1.kafka中涉及的名词消息记录(record): 由一个key,一个value和一个时间戳构成,消 ...
React的核心概念—— Jsx、 Component、 Props、 Refs、 State
前端的3大主流框架:vue.angular.react React的核心思想:组件化 React的核心概念:组件/jsx/props/state/refs 一.React的概述 ui = user i ...
DDD战略设计相关核心概念的理解
前言本文想再讨论一下关于领域.业务.业务模型.解决方案.BC.领域模型.微服务这些概念的含义和关系.初衷是我发现现在DDD领域建模以及解决方案落地过程中,常常对这些概念理解不清楚或者有歧义,导致我们 ...
python面向对象难学_学不下去了！？详解Python面向对象核心概念，简历没跑了
目前代码技能已经成了测试同学面试考核的刚需,对于测试开发来讲需求最大的是java和python两门语言,二者也都是面向对象语言.对于刚入门代码的同学来说面向对象相关的概念比较难于理解,而面向对象编程相 ...
图计算思维与实践（二）核心概念与算法
前言在前文<图计算思维与实践 (一)概览>中,我们介绍了以知识图谱.网络分析为主的图计算的应用,阐述了图思维的方式.本文我们将进入第二部分:图相关的核心概念与算法,这些是进行图探索的基础 ...
React 中的虚拟 DOM 是什么？
虚拟 DOM 是一个基本的 React 概念.如果您在过去几年编写过 React 代码,您可能听说过它.但是,你可能不明白它是如何工作的以及 React 为何使用它. 本文将介绍什么是虚拟 DOM,它 ...
Storm 核心概念详解
一.Storm核心概念 1.1 Topologies(拓扑) 一个完整的 Storm 流处理程序被称为 Storm topology(拓扑).它是一个是由 Spouts 和 Bolts 通过 Stre ...

react中的核心概念

react中的核心概念相关推荐

最新文章

热门文章