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. 测试Thread中的常用方法

    package com.yhqtv.java; /* *测试Thread中的常用方法: * 1.start():启动当前线程:调用当前线程的run() * 2.run():通常需要重写Thread类的 ...

  2. 如何快速地恢复你的win10

    win10清单 这份List不会介绍如何安装系统,而是当面对一个新系统,如何最快的搭建,或者说恢复到一个生产力环境. 必备习惯 备份软件安装包和常用内容上云是高效恢复的两点关键. 备份软件安装包 我的 ...

  3. 为何 UNIX 时间 0, 有时显示是1970年1月1日,有时显示是1969年12月31日

    by Rachael Arnold http://www.rachaelarnold.com/dev/archive/why-is-date-returning-wrong Demystifying ...

  4. js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...

  5. Linux打开文件句柄/proc/sys/fs/file-max和ulimit -n的区别

    max-file 表示系统级别的能够打开的文件句柄的数量.是对整个系统的限制,并不是针对用户的.ulimit -n 控制进程级别能够打开的文件句柄的数量.提供对shell及其启动的进程的可用文件句柄的 ...

  6. 《例说51单片机(C语言版)(第3版)》——1-3 认识MCS-51的存储器结构

    本节书摘来异步社区<例说51单片机(C语言版)(第3版)>一书中的第1章,第1.3节,作者:张义和,王敏男,许宏昌,余春长,更多章节内容可以访问云栖社区"异步社区"公众 ...

  7. POJ Building a Space Station 最小生成树

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15664   Accepted: 6865 Description You ...

  8. java学习first_day

    java枚举 public class EnumMethodDemo { enum Color {RED, GREEN, BLUE;} enum Size {BIG, MIDDLE, SMALL;} ...

  9. Redis 到底是单线程还是多线程?我要吊打面试官!

    最近在Java技术栈公众号发布的一篇文章,其中有一道题: Redis是多线程还是单线程?(回答单线程的请回吧,为什么请回,请往下看) 好些粉丝在后台问我:为什么请回,Redis不是单线程吗? 大家注意 ...

  10. 组队训练 K K - The Stream of Corning 2

    K - The Stream of Corning 2 这个题目不是很难,因为给你的这个S是单调递增的,所以就用优先队列+权值线段树就可以很快的解决了. 这个+读入挂可以优化,不过不用也没关系. #i ...