使用JSX的注意事项
Posted 紫诺花开
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用JSX的注意事项相关的知识,希望对你有一定的参考价值。
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的注意事项的主要内容,如果未能解决你的问题,请参考以下文章