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

相关文章