2. React JSX语法及特点介绍

发布时间：2020-12-15 08:23:00 所属栏目：百科来源：网络整理

导读：什么是JSX JSX 是一种类 XML 语言，全称是 JavaScript XML 。React 可以不使用 JSX来编写组件，但是使用JSX可以让代码可读性更高、语义更清晰、对 React 元素进行抽象等等。 JSX不是XML或者HTML，不是一种限制，是基于ECMAScript的一种新特性，一种定义带

什么是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>
"../build/react-dom.js""../build/browser.min.js"    </head>
    <body>
        <div id="example"></div>
type="text/babel"            ReactDOM.render(
                <h1
                    /*
                        注释1
                     */
                    name = "test" // 注释2
                >Hello,world!</h1>                document.getElementById('example')
            );
</script>
    </body>
</html>

css样式使用

className替代class属性

        <title>jsx样式使用1className        <style "text/css"            .text-red{
                color : red
            }
        </style>
render(
                //元素不能直接写class因为在es是关键字，无法被识别。要使用className替换原来的属性。
                //<h1 class='text-red'>Hello,world!</h1>,
                <h1 className='text-red'>Hello                document.getElementById(            </script>
</html>

react使用css

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

条件判断的四种写法

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

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

2. 使用变量

createClass({
            getName:  if (name)
 return this.name
 else
 return "World"
            }            render:  var name = this.getName()</body>

3. 大括号直接调用函数

this.getName()}</        //ReactDOM.render(<div><HelloWorld></HelloWorld></div>,106); background-color: inherit;"></body>

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

function () {
                // 左边如果有直就返回左边的，否则返回右边的。
this.props.name || </body>

万能的函数表达式

function (obj) {
 if (obj. return obj.                })(this)}</</body>

非DOM 属性介绍

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

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

ref：父组件引用子组件

key：提高渲染性能

React diff算法流程图

dangerouslySetInnerHTML

        // dangerouslySetInnerHTML：在JSX中直接插入HTML代码
 var rawHTML = {
            __html: "<h1>I'm inner HTML</h1>"
        ReactDOM.render(<div dangerouslySetInnerHTML={rawHTML}></div></body>

代码

查看代码

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!