<!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
视频课程来自:极客学院