详解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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
简单实现js倒计时功能
Feb 13 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
js输出列表实现代码
2010/09/12 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
基于Javascript倒计时效果
2016/12/22 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python类的用法实例浅析
2015/05/27 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python进程间通信Queue实例解析
2018/01/25 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
新员工欢迎词
2014/01/12 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
父母寄语大全
2014/04/12 职场文书
学术诚信承诺书
2014/05/26 职场文书
温馨提示标语
2014/06/26 职场文书
大学生安全责任书
2014/07/25 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
学术会议通知
2015/04/15 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
一文搞懂Redis中String数据类型
2022/04/03 Redis