react中JSX是一种JavaScript + xml语法,用来创建虚拟DOM和声明组件。他可以更好的让我们读、写模板或组件。

JSX语法浏览器是不识别的,需要通过babel 来进行转换成浏览器识别的代码

JSX将虚拟DOM转换为真实DOM原理:

1、会基于babel-react-preset语法包,把 jsx变为React.createElement这种模式

2、通过createElement这个方法的执行生成一个对象(虚拟DOM对象)

{
key:null,
ref:null,
props:{},
type:'div'
...
}

3、基于react-dom中render方法,把创建的JSX对象放到指定的容器中

//ReactDOM.render([JSX对象],[容器],[回调])

JSX的优势:

1、JSX执行更快
2、更安全,编译时能及时发现错误
3、JSX 编写模板更加简单快速

JSX的注意事项:

1、使用JSX时要引入React库

2、jsx语法中只能有一个顶级标签(元素)

3、使用组件时,首字母必须大写

4、样式中 class, 写成 className

5、所有元素标签必须闭合(尤其单标签)

6、jsx表达式不能使用if else(可以使用三元运算符)

7、在JSX中通常通过{} 的方式插入值,但设置style属性需要{{ }}

8、注释方式

ReactDOM.render(
<div>
{/*JSX 中的注释方式*/}
</div>,
document.getElementById('root')
)

9、表单设置value默认值 要使用两种方式解决

//1、给表单元素加事件onChange(受控组件)

<input value="1" onChange={(ev)=>{}}/>

//2、定义默认值使用 defaultValue(非受控组件)

<input value="1" defaultValue="1">
表单元素如果设置一个默认值(基于state中状态)

10、JSX中的花括号{}

1) 可以放任意js代码
//与vue区别,vue{{}} react {}
2) {}会默认展开数组
比如[1,2,3,4] 打印出的 是 1234
3) 注释 {/**/} 在花括号里面注释
4) {}还可以声明函数,但不能直接调用
5) 输出数据时候,赋值给某个元素属性
//比如 value={a}
6) 设置style也用{},里面可放对象
//比如style={{width:'200px','height:100px'}}

使用JSX的注意事项的更多相关文章

  1. 玩转 React【第02期】:恋上 React 模板 JSX

    往期回顾 前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦,而且层级结构特别不清晰.今天我们来看一种优雅的编写React的代码的 ...

  2. 【转】【Html】Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...

  3. 如何在iview组件中使用jsx

    最近选用的框架iview表单组件的render写法让人有点不习惯,尤其是在写比较复杂的逻辑的时候,还是感觉模板式的写法比较方便且可读性较强.而render函数除了支持配置写法外,还支持jsx的写法.由 ...

  4. Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

    时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...

  5. React使用JSX语法

    目录: 1.在React项目中启用JSX语法 2.在JSX中写js代码 3.使用JSX注意事项 1.在React项目中启用JSX语法  <--返回目录 JSX语法:符合xml规范的js语法 JS ...

  6. 【原】webpack--loaders,主要解释为什么需要loaders和注意事项

    Why需要loaders? webpack开箱即用只支持JS和JSON两种文件类型,但是比如css.less,还有目前市场上比较新的语法糖jsx,怎么处理呢? 通过Loaders去支持其他文件类型并且 ...

  7. 1.2 JSX 语法

    官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html JSX 语法听上去很讨厌,但当真正使用的时候会发现,JSX 的写法在组件的组合 ...

  8. 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组(列表)循环输出

    接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...

  9. React实践debug:JSX输出的限制(存疑)

    今天在练习React构建组件的时候遇到一个问题. 由于文档中反复提倡将组件尽可能按功能单位分解复用.在练习用React做一个todolist时候,我把todolist分解成两部分: class Tod ...

随机推荐

  1. Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2)

    第一次参加cf的比赛 有点小幸运也有点小遗憾 给自己定个小目标 1500[对啊我就是很菜qvq A. The Rank 难度:普及- n位学生 每个学生有四个分数 然鹅我们只需要知道他的分数和 按分数 ...

  2. 多IP加强SSH的安全性

    本文针对一台服务器有多个网卡及IP地址的情况,可以限制某些IP不监听SSH,只允许通过某些IP来登陆 以下配置项在/etc/ssh/sshd_config文件中修改 比如你有4个网卡: eth0 – ...

  3. 【CodeChef】Querying on a Grid(分治,最短路)

    [CodeChef]Querying on a Grid(分治,最短路) 题面 Vjudge CodeChef 题解 考虑分治处理这个问题,每次取一个\(mid\),对于\(mid\)上的三个点构建最 ...

  4. Equivalent Sets HDU - 3836 (Tarjan)

    题目说给出一些子集,如果A是B的子集,B是A的子集,那么A和B就是相等的,然后给出n个集合m个关系,m个关系表示u是v的子集,问你最小再添加多少个关系可以让这n个集合都是相等的 如果这n个几个都是互相 ...

  5. 2018"百度之星"程序设计大赛 - 资格赛hdu6349三原色(最小生成树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6349 题目: 三原色图 Time Limit: 1500/1000 MS (Java/Others)  ...

  6. jenkins自动打包部署项目

    首先去jenkins的官网下载安装包 https://jenkins.io/   个人下载是长期稳定的那个版本,下载后,得到一个.msi的安装包: 点击进行安装,然后一直点击下一步. jenkins会 ...

  7. Django(一)自定义web框架

    https://www.cnblogs.com/yuanchenqi/articles/6083427.htm 一 什么是web框架 框架,即framework, 特指为解决一个开放性问题而设计的具有 ...

  8. Java IO流篇

    什么是IO流 思考问题 如何读写文件? 解决--通过流读写文件 流是指一连串流动的字符,以先进先出传输信息的通道. Java操控硬盘上的文件,通过IO流来实现 Java流的分类 按流向区分 ---输出 ...

  9. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  10. phpstudy vhosts.conf 文件配置 记录下!

    <VirtualHost _default_:80>DocumentRoot "D:\phpStudy\WWW" <Directory "D:\phpS ...