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. 【BZOJ1152】歌唱王国(生成函数,KMP)

    [BZOJ1152]歌唱王国(生成函数,KMP) 题面 BZOJ 洛谷 题解 根据\(YMD\)论文来的QwQ. 首先大家都知道普通型生成函数是\(\displaystyle \sum_{i=0}^{ ...

  2. 【博弈论】浅谈泛Nim游戏

    Nim游戏在ACM中碰到了,就拎出来写写. 一般Nim游戏:有n堆石子,每堆石子有$a_i$个,每次可以取每堆石子中$[0,a_i-1]$,问先手是否有必胜策略. 泛Nim游戏:每堆石子有$a_i$个 ...

  3. visual studio 阅读 linux-kernel

    @2018-12-13 [小记] 使用 visual studio 阅读 linux-kernel 方法 a. 文件 ---> 新建 --->从现有代码创建项目 b. 指定项目存储位置,命 ...

  4. CPU监控 解题报告

    CPU监控 这种题就需要小黄鸭调试法,不行就重构,动态gdb可能会死人,一堆tag的... 维护历史最值的一个核心是历史最值tag,它的意义是从上一次这个点下放tag之后到当前时刻的这个点的tag达到 ...

  5. Nginx优化文件编写

    server_tokens off; #并不会让nginx执行的速度更快,关闭它可隐藏错误页面中的nginx版本号charset utf-8,gbk; #字符#sendfile on;#tcp_nop ...

  6. LVM-COW写实备份

    [root@localhost ~]# fdisk -l /dev/sdb /dev/sdc | grep "LVM"/dev/sdb1 1 9660 77593918+ 8e L ...

  7. 万物互联之~RPC专栏

    3.RPC引入 上篇回顾:万物互联之~深入篇 Code:https://github.com/lotapp/BaseCode/tree/master/python/6.net/6.rpc/ 其他专栏最 ...

  8. 模拟@Test的功能实现

    注解和注释区别 * 注释:给程序员看的.* 注解:给虚拟机看的.(让虚拟机看到程序中的注解,注解代表程序的一些特殊的功能.) JDK中提供的注解 @Override :描述子类重写父类的方法: * J ...

  9. hbuilder 个推 问题记录

    截止版本日期: 2017/09/19 一,安卓没有角标问题: Android - 2.2+ (支持): 目前仅支持小米(MIUI v5),其它设备调用后无任何效果.官方文档 二,ios角标混乱问题: ...

  10. QML学习笔记(五)— 做一个简单的待做事项列表

    做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...