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

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

视频课程来自：极客学院

原文链接：https://www.f2er.com/react/307801.html

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

猜你在找的React相关文章