JSX介绍

时间:2023-02-01 17:20:27 类型:React
字号:    
JSX:
        1, 全称: JavaScript XML;
        2, react定义的一种类似于XML的JS扩展语法 : JS + XML
        3, 本质是React.createElement(component,props,....children) 方法的语法糖
        4, 作用:用来创建虚拟DOM
           a. 写法: var ele = <h1>Hello JSX</h1>
           b. 注意1: 它不是字符串, 也不是HTML/XML标签
           c. 注意2: 它最终产生的就是一个JS对象
        5, 标签名任意:HTML标签或其它标签  
    JSX语法规则:
        1, 定义虚拟DOM时,不要写引号
        2, 标签中混入JS表达式时,要用{}[注意区分JS语句与JS表达式]
        3, 样式的类名指定不要用class(React关键词), 要用className
        4, 内联样式,要用style={{key:value}}的形式去写外面{},代表js,里面{}代表json
        5, 只有一个根标签
        6, 标签必须闭合
        7, 标签首字母:
            1> 若小写字母开头,则将改标签转为html中同名元素, 若html中无该标签对应的同名元素,则报错
            2> 若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错

区分JS语句与表达式:

 一定要注意区分:【JS语句(代码)】与【JS表达式】

        1. 表达式: 一个表达式会产生一个值, 可以放在任何一个需要值的地方

                   下面这些都是表达式:

                    1> a

                    2> a + b

                    3> arr.map()

                    4> function test(){}即使没有return , 也会返回函数本身

        2. 语句(代码):

                   下面这些都是语句(代码)

                    1> if(){}

                    2> for(){}

                    3> switch(){case:xxxx}

         key是虚拟dom标签的唯一标识, diffing算法靠key来区分不同, 是不是同一个key

实例如下:

<!-- 准备好一个 "容器" 用来放React的东西-->
     <div id="test"></div>
     <!-- 引入react核心库  全局多一个对象React -->
     <script src="../../js/react.development.js"></script>
     <!-- 引入react-dom, 用于支持react操作DOM  全局又多一个对象ReactDOM -->
     <script src="../../js/react-dom.development.js"></script>
     <!-- 引入babel, 用于将JSX转为JS -->
     <script src="../../js/babel.min.js"></script>
     <script type="text/babel"> //此处一定要写babel, 不写默认是JS
        let myId = "testDiv";
        let content = "Hello,React";
        const VDOM = (
            <div>
                <h1 id={myId} className="title" style={{color:'#fff'}}>
                    {content}
                </h1>
                <input type="text" name="" id="" />
            </div>
        )
        ReactDOM.render(VDOM,document.getElementById("test"));


<