详解React 元素渲染


Posted in Javascript onJuly 07, 2020

元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。

const element = <h1>Hello, world!</h1>;

与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

将元素渲染到 DOM 中

首先我们在一个 HTML 页面中添加一个 id="example"<div>:

<div id="example"></div>

在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称为 "根" DOM 节点。

我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点。

要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上:

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

详解React 元素渲染

更新元素渲染

React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。

目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法:

来看一下这个计时器的例子:

function tick() {
 const element = (
  <div>
   <h1>Hello, world!</h1>
   <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
  </div>
 );
 ReactDOM.render(
  element,
  document.getElementById('example')
 );
}
 
setInterval(tick, 1000);

运行结果

详解React 元素渲染

以上实例通过 setInterval() 方法,每秒钟调用一次 ReactDOM.render()。

我们可以将要展示的部分封装起来,以下实例用一个函数来表示:

function Clock(props) {
 return (
  <div>
   <h1>Hello, world!</h1>
   <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
  </div>
 );
}
 
function tick() {
 ReactDOM.render(
  <Clock date={new Date()} />,
  document.getElementById('example')
 );
}
 
setInterval(tick, 1000);

除了函数外我们还可以创建一个 React.Component 的 ES6 类,该类封装了要展示的元素,需要注意的是在 render() 方法中,需要使用 this.props 替换 props:

class Clock extends React.Component {
 render() {
  return (
   <div>
    <h1>Hello, world!</h1>
    <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
   </div>
  );
 }
}
 
function tick() {
 ReactDOM.render(
  <Clock date={new Date()} />,
  document.getElementById('example')
 );
}
 
setInterval(tick, 1000);

以上就是详解React 元素渲染的详细内容,更多关于React 元素渲染的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
JS数据类型判断的几种常用方法
Jul 07 #Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 #Javascript
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 #Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 #Javascript
React+EggJs实现断点续传的示例代码
Jul 07 #Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 #Javascript
You might like
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
jQuery插件开发基础简单介绍
2013/01/07 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
Python中序列的修改、散列与切片详解
2017/08/27 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
经贸日语专业个人求职信
2013/12/13 职场文书
迟到检讨书400字
2014/01/13 职场文书
八一慰问活动方案
2014/02/07 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
销售求职信范文
2014/05/26 职场文书
陪护人员误工证明
2015/06/24 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers