您的位置：首页 > Web前端 > React

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

2015-08-27 17:08 851 查看

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

视频课程来自：极客学院

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航