码迷,mamicode.com
首页 > Web开发 > 详细

使用JSX的注意事项

时间:2019-02-16 15:20:07      阅读:546      评论:0      收藏:0      [点我收藏+]

标签:inpu   表达   基于   优势   if else   表单元素   strong   使用   展开   

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的注意事项

标签:inpu   表达   基于   优势   if else   表单元素   strong   使用   展开   

原文地址:https://www.cnblogs.com/theblogs/p/10387682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!