详解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实现分割提取页面所需内容
May 09 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
webpack入门必知必会
Jan 16 Javascript
原生JS实现幻灯片
Feb 22 Javascript
详解Node.js串行化流程控制
May 04 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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
坏狼的PHP学习教程之第2天
2008/06/15 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php实现encode64编码类实例
2015/03/24 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python提取内容关键词的方法
2015/03/16 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
运动会广播稿80字
2014/01/23 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
2014年冬季防火方案
2014/05/21 职场文书
学校教研活动总结
2014/07/02 职场文书
护士求职信
2014/07/05 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
教师教育教学随笔
2015/08/15 职场文书