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

时间：2021-02-24 11:20:19
<!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




视频课程来自：极客学院



标签：

相关文章