阅读 3382

JSX,了解一下?

  • JSX是神马
    • 书写规范
  • JSX中的{}
    • 属性
    • children
    • 防止xss
    • 其它注意事项
  • JSX 与 单入口
  • JSX 与 模板引擎的区别
  • JSX是对真实DOM的描述

JSX是神马

JSXReact中特有的东东,全称 Javascriptのxml

它的长相是这样的

let jsx = <h1>hello</h1>;
复制代码

看起来就是一个普通的html标签不是?嗯。。。慢着。。。看看做左边,我们将这个html标签赋给了一个js变量!

what!? 这是什么操作?

嘿,这就是JSX的功能了。我们说JSX的全称应该翻译为Javscriptのxml(Javscript中的xml),而没有翻译成Javascript和xml,这是因为比起xml/html标签,这更像是在javascript中扩展了一个功能,它把xml当做变量的值赋给js变量,这是对javascript语法的延伸

另外如果只考虑JSX的长相,我们也常常把它称之为 jsx tag

书写规范

JSX 支持换行

let jsx = (
    <div>
    	<h1>hello</h1>
    </div>
)
复制代码

需要注意的是老版本的React如果你换行但没带上()作为注释的话,那么React会自动在=后填上;就会报错!

JSX中的{}

{}能帮助我们更好的描述一个JSX tag属性children

属性

一个JSX tag 也能像xml/html 标签元素一样拥有很多的属性,像这样

let jsx = <img src='./xxx...'/>
复制代码

这个属性的值可以是一个固定的字符串,也可以是一个动态的js变量,但这个js变量必须利用{}包裹起来。(Vue中这货称之为mustache)

let src = './1.jpg';
let jsx = <img src={src} />
复制代码

children

另外{}其实能包含任何JS表达式(只要有返回值,返回原生js对象除外),甚至是延伸出的JSX tag 并且{}不仅能作为属性的值,还能作为一个JSX tag的子元素(文本或Element)。

let className = 'class1';
let src = './1.jpg';
let element2 = <img src={src} alt='1.jpg'/>;
let element = (
  <div className={className}>
    {element2} //<----看这里!!!
  </div>
);
复制代码

其它注意事项

我们说了{}只能放表达式,什么样的不是表达式呢,像这样的

<div>{let i = 123;i}</div> //<---错误的示范!!!会报错
复制代码

另外{}中禁止放置JS对象,会报错

{}中放置null是不会报错的,放置null表示什么都不渲染

防止xss

{}中返回的若是一个JSX,且是一个脚本,{}会自动将其转换成普通的字符串防止脚本注入。

JSX 与 单入口

一个js变量它并不会管它所接受的JSX tag内部是否包含了其它JSX tag,但它有一个原则,那就是它只能接受一个JSX tag作为入口

这意味着如果你给js变量赋值时你得JSX长这样,就会报错

let jsx = (
    <div></div>
    <img />
)
复制代码

JSX 与 模板引擎的区别

综上所述JSX中的{}让其拥有了类似模板引擎的功能,但它比模板引擎更强大,因为它是javascript语法的延伸:

  • 你可以把它作为一个变量的值,在if和for循环中使用它
  • 也能把它当做参数传递给函数
  • 还能作为函数的返回值返回。

JSX是对真实DOM的描述

上面我们说了这么多,但实际上JSX代表了什么呢?它代表的就是一个DOM元素吗?

这样的认知是不大稳妥的,实际上它是对 DOM元素 的一种描述,并不是DOM元素本身。

前面所说的JSX tag们都会在编译后变成这样

//编译前
let jsx = <h1 className="class1">hello</h1>
//编译后
React.createElement(
    'h1' //类型
    ,{className:'class1'} //标签属性键值对
    ,'hello' //children节点
)
复制代码

而这个React.createElement函数最会生成一个对象,我们称之为React对象或则还有一个更高逼格的名称虚拟DOM

{
  type: 'h1',
  props: {
    className: 'class1',
    children: 'hello'
  }
}
复制代码

这个react元素是对即将要生成的真实DOM的一种描述,React会根据这个对象的描述渲染出真正的dom元素。

注意: 当只有一个子元素时,children的值是一个字符串或则对象,但存在多个子元素时,则会成变成一个数组,每个数组中存放着对应的子元素。


ToBeContinue...