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

最新推荐文章于 2022-05-20 17:06:30 发布

thystar

最新推荐文章于 2022-05-20 17:06:30 发布

阅读量1k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/48030001

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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

视频课程来自：极客学院

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记（3）-- JSX语法及特点介绍

<!--1. JSX=JavaScript XMLJSX是一种基于ECMAScript的一种新特性是一种定义带属性树结构的语法不是XML或HTML不是一种限制JSX的特定：1）.类XML语法容易接受2).增强JS语义3).结构清晰4).抽象程度高5).代码模块化2.使用JSX--直接编写html代码在下面的例子中；HelloWorld 是一个元素名，this.pr
复制链接

扫一扫

专栏目录