详解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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
js数组实现权重概率分配
Sep 12 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
图解javascript作用域链
2019/05/27 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
不可错过的十本Python好书
2017/07/06 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python add_argument()用法解析
2020/01/29 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
无故旷工检讨书
2014/01/26 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
学校财务管理制度
2015/08/04 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android