React Elements 是构成React App的最小单位。React中的组件是由一个或多个Elements构成的。

和DOM不同,React Elements 是纯粹的JS对象。利用React生成的DOM会根据React elements的数据变化实时更新。

1.RE挂载到DOM节点:

 const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);

只要调用ReactDOM.render即可,#root节点中的DOM内容将由element搭建.

2.RE生成后是不可改动的。

一旦生成,RE的子元素和特性将不可改变。此时如果要改变UI,只能重新创建一个RE,并传入ReactDOM.render中。不过文档指出,生产中大多数React Apps的UI组份只调用一次render方法即可。

3.React DOM只会更新有变化的的部分。当element发生改变后,React DOM会将它与上一个Element的内容进行比较,只有变化了的部分会发生更新,不变的部分不动,从而将渲染的开销降低。

React:Element的更多相关文章

  1. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

  2. React的Element的创建和render

    React的Element是React应用程序的最小构建块,它是用来描述我们在屏幕上看到的浏览器页面上的内容. 在React中构建 Element 有两种方式: 1.JSX的方式,JSX不是React ...

  3. 五分钟学习React(六):元素(Element)和组件(Component)

    俗话说"万丈高楼平地起",从这一期开始,我们将使用基于Webpack+Babel的React学习React框架中的一些基础概念.在学习React的过程中经常会把Element.Cl ...

  4. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  5. React Native 常见问题集合

    在使用React Native时候,我记录下比较常遇到的问题,分为以下几类: 1. 调试问题 2. 写法问题 3. 疑难问题 4. 奇怪问题 调试问题 1. 在react-native run-and ...

  6. [React] React Fundamentals: First Component

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. [React Testing] Intro to Shallow Rendering

    In this lesson, we walk through how to use one of React's Test Utilities (from thereact-addons-test- ...

  8. React使用笔记(3)-React Event Listener

    Date: 2015-11-28 12:18 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1. 构造基本结构 首先,我们先创建一个按钮,一个输入框 ...

  9. React源码解析-Virtual DOM解析

    前言:最近一直在研究React,看了陈屹先生所著的深入React技术栈,以及自己使用了这么长时间.对React应该说有比较深的理解了,正好前阵子也把两本关于前端设计模式的书看完了,总感觉有一种知识错综 ...

随机推荐

  1. 总结php删除html标签和标签内的内容的方法

    来源:https://www.cnblogs.com/shaoguan/p/7336984.html 经常扒别人网站文章的坑们:我是指那种批量式采集的压根不看内容的:少不了都会用到删除html标签的函 ...

  2. 【集群实战】inotify

    1. inotify简介 Inotify是一种强大的,细粒度的,异步的文件系统事件监控机制(软件). linux内核从2.6.13起,加入了Inotify支持,通过Inotify可以监控文件系统中添加 ...

  3. Python中字符串输出带颜色

    格式:\033[显示方式;前景色;背景色m 说明:前景色            背景色           颜色---------------------------------------30    ...

  4. CSS样式2

    1.css重用 <style> .cl{ ... } .c2{ ... } .c{ ... } </style> <div class='c c2'></di ...

  5. 聊聊flink的BlobStoreService

    序 本文主要研究一下flink的BlobStoreService BlobView flink-release-1.7.2/flink-runtime/src/main/java/org/apache ...

  6. 深度解析国内首个云原生数据库POLARDB的“王者荣耀”

    随着移动互联网.电子商务的高速发展,被使用最多的企业级开源数据系统MySQL面临着巨大挑战--为迎接"双11"的高并发要提前做好分库分表;用户不断激增要将读写分离才能应对每天上亿次 ...

  7. Bubble Cup 11 - Finals [Online Mirror, Div. 1]题解 【待补】

    Bubble Cup 11 - Finals [Online Mirror, Div. 1] 一场很好玩的题啊! I. Palindrome Pairs 枚举哪种字符出现奇数次. G. AI robo ...

  8. Gartner:2016 Q2全球服务器市场,中国再度成为亮点

    对于IT产品供应商来说,Gartner.IDC等第三方分析机构市场调研报告无疑是一次"中考",成绩优异的论功行赏,迎接鲜花和掌声:差强人意,批斗会将是不可避免的,接下来加班加点,力 ...

  9. 数学--数论--HDU 5223 - GCD

    Describtion In mathematics, the greatest common divisor (gcd) of two or more integers, when at least ...

  10. USACO Training Section 1.2 挤牛奶Milking Cows

    题目描述 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300秒(从5点开始计时)给他的牛挤奶,一直到1000秒.第二个农民在700秒开始,在 1200秒结束.第三个农民在1500秒开 ...