2. React JSX语法及特点介绍

什么是JSX


        JSX 是一种类 XML 语言,全称是 JavaScript XML 。React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高、语义更清晰、对 React 元素进行抽象等等。

        JSX不是XML或者HTML,不是一种限制,是 基于ECMAScript的一种新特性, 一种定义带属性树结构的语法。JSX是JS的一中语法糖,类似CoffeeScript、TypeScript最终都是被解释为JS。语法糖必须要有解析器解析,浏览器才可以识别。解析JSX的库是browser.min.js;
        

JSX的特点

 
        类XML语法 , 容易接受 
        增强JS语义
        结构清晰
        抽象程度高
        代码模块化

如何使用JSX(JSX语法)


两种注释
html>
lang="zh-cn">

charset="UTF-8">
</span>jsx<span style="font-family:'宋体';">注释</span><span style="color:rgb(232,191,106);">





id="example">



 
css样式使用
className替代class属性
html>
lang="zh-cn">

charset="UTF-8">
</span>jsx<span style="font-family:'宋体';">样式使用</span>1className<span style="color:rgb(232,191,106);">






id="example">



react使用css

id="example">



条件判断的四种写法

1. JSX不可以直接使用if判断,可以使用三元运算符替代if



2. 使用变量


3. 大括号直接调用函数



4. 使用比较运算符(||运算符)



万能的函数表达式



非DOM 属性介绍


        React中有三个非DOM属性:dangerouslySetInnerHTML、ref、key
        dangerouslySetInnerHTML:在JSX中直接插入HTML代码
        ref:父组件引用子组件
        key:提高渲染性能

        React diff算法流程图
        

dangerouslySetInnerHTML




代码
         查看代码 

你可能感兴趣的:(前端)