JSX语法及特点

最新推荐文章于 2024-08-02 09:52:55 发布

u013063153

最新推荐文章于 2024-08-02 09:52:55 发布

阅读量3.2k

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/u013063153/article/details/52476040

版权

JSX是基于ECMAScript的新特性，类似XML的语法，用于定义带属性的树结构。它增强了JavaScript的语义，使代码结构清晰且模块化。JSX可用于创建React组件，支持嵌套和条件判断。非DOM属性如dangerouslySetInnerHTML、ref和key在React中有特殊用途，key用于优化渲染性能。JSX的解释器通过入口函数、模块解析和执行过程来处理JSX语法。

摘要由CSDN通过智能技术生成

1.什么是JSX

JSX = JavaScript XML

JSX是：

基于ECMAScript的一种新特性；

一种定义带属性树结构的语法；

JSX不是：

不是html或xml；

不是一种限制（推荐使用，也可以不使用）

特点：

类xml语法，容易接受

增强js语义

结构清晰

抽象程度高（诞生了跨平台 react native）

代码模块化

2.如何使用JSX

var HelloMessage = React.createClass({

render:function(){

return <div className="test">Hello{this.props.name}</div>

}

});

React.render(<HelloMessage name="John"/>,mountNode)

自定义组件，首字母大写

嵌套

求值表达式

htmlFor和className

(1)注释 CSS样式以及嵌套

<script type="text/jsx">
    var HelloWorld = React.createClass({
        render:function () {
            return <p
            /*
            comment..
            */
                    name="test" //set name to test
            >Hello, World!{
                /*
                comment...
                 */
                "hello"
                //comment...
            }</p>
        }
    });
    React.render(<HelloWorld></HelloWorld>,document.body);
</script>

<script type="text/jsx">
    var style={
        color:"red",
        border:"1px solid #000"
    };

    var HelloWorld = React.createClass({
        render:function () {
            return <p>Hello, World!</p>
        }
    });
    React.render(<div style={
 style}><