直接上代码
const element = <h1>Hello, world</h1>;
ReactDOM.render(
    element, 
    document.getElementById('root’)
);
声明了一个变量element,将JSX语法的h1标签赋值给它,然后React.render()是渲染方法,它可以将element添加到#root中
 
注意:
    1.根节点只能有一个
    2.根节点只能有一个
    3.根节点只能有一个
const element1=<div>
    <h1>Hello,World!</h1>
    <h2>Hello,Siri!</h2>
</div>
 
 
const element2=<h1>
    <small></small>
    <strong></strong>
</h1>
element1的跟节点是div,element2的根节点是h1,根节点只能有一个!!!
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}
 
 
setInterval(tick, 1000);//定时器
    上述代码中,最下面是一个定时器,每1000毫秒,tick执行一次,tick函数做的事情是:声明一个element变量,
在element中获取当前时间new Date()是获取当前时间戳,然后通过toLocalTimeString获取到当前“上午11:11:11”,再然后通过渲染方法ReactDOM.render()将element放到#root中。每1000毫秒获取新的时间放到#root中去。
    留心的同学可能会发现element赋值后面有一个括号,这个括号是为了方便,如果你不想写这个括号的话,那么你必须把代码写成这个样子
function tick() {
  const element = <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>;
  
  ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);//定时器
    注意div被提前了一行,放到了等号后面,如果放到下一行,将出错。
    这时候有同学可能有疑问了,不是说const声明的变量不可被修改吗,为什么element重复声明?
    稍微解释一下:每次都声明一个新的element变量,新的element变量跟之前的没有关系,并不是修改,而是重新声明,比如:
const a=1;
!function() {
  const a=2; //这个a跟外界的a没有任何关系
}()
注:看不懂的话,请看我另一篇文章let与var与const;
 
注意:我们的React在这个过程中,实际是引入了一个虚拟DOM的一个概念。虽然我们每1000毫秒都将
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
添加进#root中,但其实真正在操作dom之前,我们亲爱的React又做了一步工作,那就是通过伟大的Diff算法来计算我们要新加入的标签与之前页面中已经存在的页面都有哪些差距,然后只在dom上更新那一点点不同的位置即可。具体Diff算法是怎么工作的,对于现在的我们,还不需要了解那么多。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

小白学习React官方文档看不懂怎么办?3.元素渲染的更多相关文章

  1. 小白学习React官方文档看不懂怎么办?

    最近在上React课程的时候,发现好多同学不会看文档,所以在这里写一篇文章,希望能给同学们一点点启发. 我们首先打开React官方网站——https://react.docschina.org/doc ...

  2. 小白学习React官方文档看不懂怎么办?2.JSX语法

      接下来我们就要讲到JSX语法了,在我们讲它之前,我们先引入一个概念叫语法糖.     听到这个名字首先我们可能会想到一个词叫”糖衣炮弹“,那么什么叫糖衣炮弹呢,就是给你说各种好听的话,来迷惑你,但 ...

  3. React官方文档笔记之快速入门

    快速开始 JSFiddle 我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack. 要用 webpack 安装 React DOM 和构建你的包: ...

  4. 学习android 官方文档

    9.29 1. 今天,FQ,看到android studio中文网上有一个FQ工具openVPN,我就使用了. 之前用过一个FQ工具开眼,但由于网速慢,我就弃用了. 2. 现在,我就可以FQ去andr ...

  5. requests库的学习——跟随官方文档

    发送GET请求: import requests r=requests.get("http://www.kekenet.com/") 如果需要传递参数可以有以下几种方法: impo ...

  6. 照着官方文档学习react

    笨人学习法 10000个小时策略来学习,因为笨.先照着官方文档敲一遍,写一遍. 准备 先要准备环境.搭建一个基于webpack的react环境:Hello ReactJS. demo: https:/ ...

  7. 看官方文档学习springcloud搭建

    很多java的朋友学习新知识时候去百度,看了之后一知半解,不知道怎么操作,不知道到底什么什么东西,那么作为java码农到底该怎么学习额 一  百度是对还是错呢? 百度是一个万能的工具,当然是对也是错的 ...

  8. 学习h264 的语法规则,如何才能看懂H264 的官方文档

    1. 今天想查h264 的帧率,查找资料如下: 首先要解析sps,得到两个关键的数值: num_units_in_tick, time_scale fps=time_scale/num_units_i ...

  9. webpack新手名词解释……妈妈再也不担心我看不懂webpack官方文档了

    __dirname : 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径. path.resolve(): 方法将一系列路径或路径段解析为绝对路径. 语法: p ...

随机推荐

  1. 前端路由hash、history原理及简单的实践下

    阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...

  2. 整洁的 Table View 代码

    Table view 是 iOS 应用程序中非常通用的组件.许多代码和 table view 都有直接或间接的关系,随便举几个例子,比如提供数据.更新 table view,控制它的行为以及响应选择事 ...

  3. 课堂动手动脑验证以及自定义异常类实现对异常处理——java异常类

    异常(exception):发生在程序执行期间,表明出现了一个非法运行的情况.许多JDK中的方法在检测到非法情况时,都会抛出一个异常对象.例如:数组越界和被0除. 代码验证: package test ...

  4. unity message

    再用unity进行开发过程中,不可避免的用到消息的传递问题,以下介绍几种消息传递的方法: (一)拖动赋值 此方法即为最普通的方法,即把需要引用的游戏物体或者需要引用的组件拖动到相关公有变量的槽上,然后 ...

  5. 写出float x 与“零值”比较的if语句——一道面试题分析

    写出float  x 与“零值”比较的if语句 请写出 float  x 与“零值”比较的 if 语句: const float EPSINON = 0.00001; if ((x >= - E ...

  6. 让你的sql开启氮气加速

    事情的过程是:公司有一个上百行的sql 运行在MySQL数据库,速度奇慢无比,逻辑乱七八糟,我就不贴出来了,经过这次修改想总结一下如何写一个不被人骂的sql. 说一些被人诟病的问题: 一.子查询 把你 ...

  7. 学习笔记13_第三方js控件&EasyUI使用

    第三方UI包使用思路: 1.先映入各种JS包,包含JS版本包,第三方CSS包,第三方主JS包,第三方语言包. 2.确定要做什么,是对话框还是表格.3.根据Demo和目的,在<body>内, ...

  8. Visual Studio Online 的 FAQ:iPad 支持、自托管环境、Web 版 VS Code、Azure 账号等

    北京时间 2019 年 11 月 4 日,在 Microsoft Ignite 2019 大会上,微软正式发布了 Visual Studio Online 公开预览版!发布之后,开发者们都为之振奋.同 ...

  9. Pyinstaller打包scrapy

    环境 Windows7 Python3.65 scrapy1.74 PyInstaller3.5 创建打包脚本 在与scrapy.cfg同路径创建start.py # -*- coding: utf- ...

  10. mysql-清除binlog日志命令

    记录一个清除MySQL里binlog日志的命令,可用在定时任务脚本里. 只保留1天前的日志: PURGE MASTER LOGS BEFORE DATE_SUB(CURRENT_DATE, INTER ...