1. const element = <h1>Hello, world</h1>;

上面的内容代表react中的一个元素，元素是构成 React 应用的最小砖块。

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

1.如何将一个元素渲染为 DOM？

假设你的 HTML 文件某处有一个 <div>如下：

  1. <div id="root"></div>

我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。仅使用 React 构建的应用通常只有单一的根 DOM 节点。

如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()；(上一章节我们已经这么进行了)

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

2.更新已渲染的元素

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

案例：计时器的实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  8. <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  9. <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  10. <body>
  11.     <script type="text/babel">
  12.  
  13.         function tick(){
  14.             const element = (
  15.                 <div>
  16.                     <h1>下午好</h1>
  17.                     <h2>现在是,{new Date().toLocaleTimeString()}</h2>
  18.                 </div>
  19.             )
  20.             ReactDOM.render(
  21.                 element,
  22.                 document.getElementById('tick')
  23.             );
  24.         }
  25.         setInterval(tick,1000);
  26.     </script>
  27.     <div id="tick">
  28.  
  29.     </div>
  30. </body>
  31. </html>

注意：

在实践中，大多数 React 应用只会调用一次 ReactDOM.render()；

3.React 只更新它需要更新的部分：

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。可以用开发者工具查看计时器案例的更新状态。尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，

react学习笔记_02-元素渲染的更多相关文章

  1. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  2. React学习笔记（七）条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  3. React学习笔记（一）- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  4. React学习笔记（六）事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  5. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  6. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  7. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

  8. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  9. 【React】react学习笔记02-面向组件编程

    react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件   a.轻量组件-函 ...

随机推荐

  1. SELECT INTO - 从一个查询的结果中创建一个新表

    SYNOPSIS SELECT [ ALL | DISTINCT [ ON ( expression [, ...] ) ] ] * | expression [ AS output_name ] [ ...

  2. MySQL数据库使用xtrabackup备份实现小例子

    关于MySQL数据库的备份的工具和方式也比较多,本文只简单介绍一些我司一个平台的备份方案.Xtrabackup是由percona开源的免费数据库热备份软件,但是只能对InnoDB数据库和XtraDB存 ...

  3. Polish orthography

    Computer encoding[edit] There are several different systems for encoding the Polish alphabet for com ...

  4. py2 一键转换成py3

    找到python自带的2to3-3.7 文件,在终端里输入 python 2to3-3.7 -w /Users/v_fanjiexiong/PycharmProjects/HugeGraph_fan/ ...

  5. Vue 滚动条动画

    <template> <div class="home-main"> <div class="progress-main"> ...

  6. linux开机启动jar

    一.使用系统文件rc.local 启动命令可添加在/etc/rc.local(链接地址为/etc/rc.d/rc.local)中即可开机启动,不建议使用此种方法. 二.自定义启动脚本 1.新建启动脚本 ...

  7. PHP计算经纬度在百度多边形区域内

    最近做一个项目需要使用到区域,并且要判断当前的经纬度是否在区域内,已便对应业务需求变化.废话不多说直接上代码: /** * 验证区域范围 * @param array $coordArray 区域 * ...

  8. jenkins部署github项目持续集成

    一.先介绍正向代理和反向代理 正向代理 反向代理 二.安装反响代理得到固定域名 http://www.xiaomiqiu.cn/ 三.Jenkins与Github集成 配置前要求: 1.Jenkins ...

  9. 【锁】MySQL和Oracle行锁比较

    InnoDB INNODB表是索引组织的表,主键是聚集索引,非主键索引都包含主键信息. INNODB默认是行锁. INNODB行锁是通过给索引项加锁来实现的,即只有通过索引条件检索数据,InnoDB才 ...

  10. Java Web学习总结（7）JSP（一）

    一,JSP基础语法 1,JSP模板元素 JSP页面中的HTML内容称之为JSP模版元素. JSP模版元素定义了网页的基本骨架,即定义了页面的结构和外观. 2,JSP脚本片段 JSP脚本片断(scrip ...