React学习笔记（3）-- JSX语法及特点介绍

发布时间：2020-12-15 04:49:30 所属栏目：百科来源：网络整理

导读：!DOCTYPE htmlhtmlhead lang="en" meta charset="UTF-8" title/title script src="build/react.js"/script script src="build/JSXTransformer.js"/script/headbody!--JSX语法特点介绍--!--1. JSX=JavaScript XMLJSX是一种基于ECMAScript的一种新特性是一种定

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>
<!--JSX语法特点介绍-->
<!--
1. JSX=JavaScript XML
JSX是一种基于ECMAScript的一种新特性
是一种定义带属性树结构的语法
不是XML或HTML
不是一种限制

JSX的特定：
1）.类XML语法容易接受
2).增强JS语义
3).结构清晰
4).抽象程度高
5).代码模块化

2.使用JSX--直接编写html代码
在下面的例子中；
HelloWorld 是一个元素名，
this.props.name中，props是子节点

注意：首字母大小写：自定义的节点首字母必须大写

3 非DOM属性：
dangerouslySetInnerHTML,动态插入html代码
ref,父组件引用子组件
key  提高渲染性能

-->
    <script type="text/jsx">
        var style = {
            color : "red",border: "1px #000 solid"
        };
//      dangerouslySetInnerHTML的使用
        var rawHTML = {
            __html:"<h1>I am inner HTML </h1>"
        };
        var HelloWorld = React.createClass({
            //this.refs.childp....   //引用ref
            render: function () {
                // ref使用
                //return <p ref="childp">HELLO WORLD</p>
                
                //key 的使用,组件内key不能相同
                return <ul>
                    <li key="1">1</li>
                    <li key="2">2</li>
                    <li key="3">3</li>
                </ul>
            },});
        React.render(<div style={style} dangerouslySetInnerHTML={rawHTML}>
                </div>,document.body);
    </script>
</body>
</html>

4. JSX解释器架构

入口函数--->

载入模块--->

解析JSX--->

执行JS

视频课程来自：极客学院

（编辑：李大同）

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