什么是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语法）

两种注释

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>jsx注释</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            ReactDOM.render(
                <h1
                    /*
                        注释1
                     */
                    name = "test" // 注释2
                >Hello, world!</h1>,
                document.getElementById('example')
            );
</script>
    </body>
</html>

css样式使用

className替代class属性

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>jsx样式使用1className</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
        <style type="text/css">
            .text-red{
                color : red
            }
        </style>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            ReactDOM.render(
                //元素不能直接写class因为class在es是关键字，无法被识别。要使用className替换原来的class属性。
                //<h1 class='text-red'>Hello, world!</h1>,
                <h1 className='text-red'>Hello, world!</h1>,
                document.getElementById('example')
            );
            </script>
    </body>
</html>

react使用css

<body>
    <div id="example"></div>
    <script type="text/babel">
        var style = {
            color : "red",
            //这里只能用驼峰命名不能用font-size
            fontSize:'88px'
        };
        ReactDOM.render(
            <h1 style={style}>Hello, world!</h1>,
            //也可以在React中使用style
            //<h1 style={{color:'red'}}>Hello, world!</h1>,
            document.getElementById('example')
        );
    </script>
</body>

条件判断的四种写法

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

<body>
    <script type="text/babel">
        var HelloWorld = React.createClass({
            render: function () {
                return <p>Hello, {this.props.name ? this.props.name : "World"}</p>
            }
        });
        //ReactDOM.render(<HelloWorld></HelloWorld>, document.body);
        ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
    </script>
</body>

2. 使用变量

<body>
    <script type="text/babel">
        var HelloWorld = React.createClass({
            getName: function () {
                if (this.props.name)
                    return this.props.name
                else
                    return "World"
            },
            render: function () {
                var name = this.getName();
                return <p>Hello, {name}</p>
            }
        });
        //ReactDOM.render(<HelloWorld></HelloWorld>, document.body);
        ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
    </script>
</body>

3. 大括号直接调用函数

<body>
    <script type="text/babel">
        var HelloWorld = React.createClass({
            getName: function () {
                if (this.props.name)
                    return this.props.name
                else
                    return "World"
            },
            render: function () {
                return <p>Hello, {this.getName()}</p>
            }
        });
        //ReactDOM.render(<div><HelloWorld></HelloWorld></div>, document.body);
        ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
</script>
</body>

4. 使用比较运算符（||运算符）

<body>
    <script type="text/babel">
        var HelloWorld = React.createClass({
            render: function () {
                // 左边如果有直就返回左边的，否则返回右边的。
                return <p>Hello, {this.props.name || "World"}</p>
            }
        });
        //ReactDOM.render(<div><HelloWorld></HelloWorld></div>, document.body);
        ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
</script>
</body>

万能的函数表达式

<body>
    <script type="text/babel">
        var HelloWorld = React.createClass({
            render: function () {
                return <p>Hello, {(function (obj) {
                    if (obj.props.name)
                        return obj.props.name
                    else
                        return "World"
                })(this)}</p>
            }
        });
        //ReactDOM.render(<div><HelloWorld></HelloWorld></div>, document.body);
        ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
    </script>
</body>

非DOM 属性介绍

React中有三个非DOM属性：dangerouslySetInnerHTML、ref、key

dangerouslySetInnerHTML：在JSX中直接插入HTML代码

ref：父组件引用子组件

key：提高渲染性能

React diff算法流程图

dangerouslySetInnerHTML

<body>
    <script type="text/babel">
        // dangerouslySetInnerHTML：在JSX中直接插入HTML代码
        var rawHTML = {
            __html: "<h1>I'm inner HTML</h1>"
        };
        var HelloWorld = React.createClass({
            render: function () {
                return <p>Hello, World</p>
            }
        });
        ReactDOM.render(<div dangerouslySetInnerHTML={rawHTML}></div>, document.body);
    </script>
</body>

代码

查看代码

2. React JSX语法及特点介绍的更多相关文章

React的jsx语法，详细介绍和使用方法！
jsx语法一种混合使用html及javascript语法的代码在js中遇到<xx>即开始html语法遇到</xx>则结束html语法恢复成js语法例如: let D ...
React JSX语法说明
原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...
React(JSX语法)-----JSX基本语法
JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...
react.js 从零开始（三）JSX 语法及特点介绍
什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...
JSX语法及特点介绍
1.1 基本语法 1)自定义组件名首字母大写:元素名即组件名,首字母需要大写.首字母小写时React会以为这是HTML的标准标签,因此自定义的组件名需要首字母大写,否则会报错. 2)嵌套:在rende ...
学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
React(JSX语法)----动态UI
1.React honws how to bubble and capture events according to the spec,and events passed to your event ...
React(JSX语法)----JSX拼写
注意:For DOM differences,such as the inline style attribute,check here. // bad: it displays "FIrs ...
React(JSX语法)-----JSX属性
1. if you know all the propertities that you want to place on a component ahead of time,it is easy t ...

随机推荐

[BZOJ]4199 品酒大会(Noi2015)
讲道理是后缀数组裸题吧,虽然知道后缀数组的原理但是小C不会写是什么鬼.. 小C趁着做这题的当儿,学习了一下后缀数组. 网络上的后缀数组模板完全看不懂怎么破,全程照着黄学长的代码抄,感觉黄学长写得还是很 ...
bzoj3894
转载自http://www.cnblogs.com/rausen 3894: 文理分科 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1338 So ...
Miller-Rabin,Pollard-Rho(BZOJ3667)
裸题直接做就好了. #include <cstdio> #include <cstdlib> #include <algorithm> using namespac ...
【Python3.6+Django2.0+Xadmin2.0系列教程之三（入门篇-下）】学生信息管理系统
上一篇我们已经初步的构建起了一个学生管理系统的模型,现在接着来继续完善它吧. 1.上传图片/文件等资源有时候需要添加一些附件,例如,新生刚入学,大家相互之间还不熟悉,希望能通过照片来加深印象,并且方 ...
java开发小技巧
链接地址:http://www.cnblogs.com/zkh101/p/8083368.html 人脸识别地址:http://blog.csdn.net/gitchat/article/detail ...
JPA注解实体类，给表添加创建时间，更新时间，id的生成以及创建唯一约束
首先创建一个BaseModel,自动生成创建时间和更新时间 @SuppressWarnings("serial") @MappedSuperclass public class B ...
python实现tab键自动补全
一.查询python安装路径,一般默认是/usr/lib64/ [root@host2 ~]# python Python (r266:, Jul , ::) [GCC (Red Hat -)] on ...
Python作业之三次登陆锁定用户
作业之三次登陆锁定用户作业要求如下: 1. 输入用户名和密码 2. 认证成功提示欢迎信息 3. 认证失败三次锁定用户具体代码如下: 方法1: import os#导入os模块 if os.path ...
获取X天后的日期
import java.util.Calendar; import java.util.Date; public class main { public static void main(String ...
Mysql锁机制--概念、分类及基础命令
Mysql 系列文章主页 =============== 1 概念在 Java 程序中,当多线程并发访问某个资源的时候,如果有非线程安全的操作,那么需要通过加锁来保护之.同理,在 Mysql 中,如 ...