博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React学习笔记
阅读量:4840 次
发布时间:2019-06-11

本文共 962 字,大约阅读时间需要 3 分钟。

和AngularJS相比,上手React简单到让人震惊。

在引入React库之后,开发API就通过React对象暴露出来了。我们要做的、能做的,就是:

在虚拟DOM上创建元素,然后将它们渲染到真实DOM上。

在示例代码中使用了React对象的两个方法:

  • createElement(type,[props],[children...]) - 在虚拟DOM上创建指定的React元素

参数type用来指定要创建的元素类型,可以是一个字符串或一个React组件类型。当使用 字符串时,这个参数应当是标准的HTML标签名称,比如:p、div、canvas等等。

参数props是可选的JSON对象,用来指定元素的附加属性,比如样式、CSS类等等。 我们在示例中简单的设置为null。

从第三个参数children开始的所有参数,都被认为是这个元素的子元素。考虑到 虚拟DOM好歹也是DOM,容易理解React需要通过这些子元素参数,让我们可以构造虚拟DOM树:

  1. var el = React.createElement(
  2. "ul",
  3. null,
  4. React.createElement("li",null,"China"),
  5. React.createElement("li",null,"Japan"),
  6. React.createElement("li",null,"Korea")
  7. );

 

这个时候上述的方法只是一个虚拟的dom,怎么吧这个虚拟的Dom渲染到真实的Dom上,我们需要调用render这个方法,这个方法里面有三个参数(element,container,callback)

参数element是我们使用createElement()方法创建的React元素,注意,不是HTML元素!

参数container是真实DOM中的HTML元素,作为渲染的目标容器,它的内容将被render()方法 的执行改变。

callback参数是可选的函数,当渲染完成或更新后被执行,通常我们不用它。(这个方法一般我们不会调用)

 

	
Hello React!

  

转载于:https://www.cnblogs.com/airycode/p/5738766.html

你可能感兴趣的文章
linux计划任务
查看>>
Egg 企业级应用开发框架的搭建
查看>>
input与button按钮背景图失效不显示的解决办法
查看>>
[Mac入门]如何在Mac下显示Finder中的所有文件
查看>>
证明二叉查找树所有节点的平均深度为O(logN)
查看>>
JavaScript基础--简单功能的计算器(十一)
查看>>
WPF Visifire使用 ---- 基础篇二
查看>>
SSAS: Using DMV Queries to get Cube Metadata
查看>>
操作系统存储器管理选择题精练
查看>>
一条咸鱼的养成
查看>>
修复LSP 解决不能上网问题
查看>>
第四周作业总结
查看>>
修改之前某次commit日志和内容
查看>>
动态规划:HDU1712-ACboy needs your help(分组背包问题)
查看>>
PAT A1009 Product of Polynomials(25)
查看>>
libFFM 与 python-libffm 安装遇到的一系列问题-解决方案
查看>>
数据摘要pandas
查看>>
浅谈C语言中的位段
查看>>
2019.04.25 第七次训练 【2017-2018 ACM-ICPC Asia East Continent League Final (ECL-Final 2017)】...
查看>>
javascript正则表达式复习
查看>>