什么是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语法及特点介绍的更多相关文章

  1. React的jsx语法，详细介绍和使用方法！

    jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...

  2. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  3. React(JSX语法)-----JSX基本语法

    JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...

  4. react.js 从零开始（三）JSX 语法及特点介绍

    什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...

  5. JSX语法及特点介绍

    1.1 基本语法 1)自定义组件名首字母大写:元素名即组件名,首字母需要大写.首字母小写时React会以为这是HTML的标准标签,因此自定义的组件名需要首字母大写,否则会报错. 2)嵌套:在rende ...

  6. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  7. React(JSX语法)----动态UI

    1.React honws how to bubble and capture events according to the spec,and events passed to your event ...

  8. React(JSX语法)----JSX拼写

    注意:For DOM differences,such as the inline style attribute,check here. // bad: it displays "FIrs ...

  9. 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 ...

随机推荐

  1. 网络基础-再议TCP

    以前只是知道3次握手和4次挥手,但是对于其在连接和断开时的各个状态却不是很懂,今天就来看一下握手和挥手时的状态转换图: 1.三次握手和四次挥手时的状态转换图: 实线表示应用程序: 应用层首先发SYN的 ...

  2. hdu4542 && ZOJ2562（反素数）

    反素数: 对于任何正整数,其约数个数记为,例如,如果某个正整数满足:对任意的正整 数,都有,那么称为反素数. 有两个特点: 1.一个反素数的质因子必是从2开始的质数 2.如果,那么必有 最常见的问题如 ...

  3. 【hihoCoder 1419】重复旋律4

    Description 小 Hi 平时的一大兴趣爱好就是演奏钢琴. 我们知道一个音乐旋律被表示为长度为 N的数构成的数列. 小 Hi 在练习过很多曲子以后发现很多作品中的旋律有重复的部分. 我们把一段 ...

  4. 【Uva 11604 编码都有歧义了】

    ·你的目的就是要让编码有歧义,这就美妙了. ·英文题,述大意:       给出n个模板字符串,询问是否存在一个字符串,使得用模板串(随便你用多少个)来拼凑这个串,能够至少有两种拼法.如果有,就输出“ ...

  5. SPOJ - DISUBSTR 多少个不同的子串

    694. Distinct Substrings Problem code: DISUBSTR   Given a string, we need to find the total number o ...

  6. c语言的第三次作业

    (一)改错题 计算f(x)的值:输入实数x,计算并输出下列分段函数f(x)的值,输出时保留1位小数. 输入输出样例1: Enterr x: 10.0 f(10.0) = 0.1 输入输出样例2: En ...

  7. Linux 软件安装到 /usr，/usr/local/ 还是 /opt 目录区别

    Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /usr:系统级的目录,可以理解为C:/Windows/, /usr/lib理解为C:/Windows/System32./ ...

  8. node的异常处理

    Node是单线程运行环境,一旦抛出的异常没有被捕获,就会引起整个进程的崩溃.所以,Node的异常处理对于保证系统的稳定运行非常重要. node的处理方法: 1.使用throw语句抛出异常 常用的捕获异 ...

  9. 初识RabbitMQ系列之二：下载安装

    一:Erlang安装 因为RabbitMQ 是Erlang语言开发的,所以首先要装上Erlang的环境 1)下载Erlang    下载官网:http://www.erlang.org/downloa ...

  10. spark学习笔记01

    spark学习笔记01 1.课程目标 1.熟悉spark相关概念 2.搭建一个spark集群 3.编写简单spark应用程序 2.spark概述 spark是什么 是基于内存的分布式计算引擎,计算速度 ...