什么是JSX
JSX 是一种类 XML 语言，全称是 JavaScript XML 。React 可以不使用 JSX来编写组件，但是使用JSX可以让代码可读性更高、语义更清晰、对 React 元素进行抽象等等。
JSX不是XML或者HTML，不是一种限制，是
基于ECMAScript的一种新特性，
一种定义带属性树结构的语法。JSX是JS的一中语法糖，类似CoffeeScript、TypeScript最终都是被解释为JS。语法糖必须要有解析器解析，浏览器才可以识别。解析JSX的库是browser.min.js；
JSX的特点
类XML语法 ，
容易接受
增强JS语义
结构清晰
抽象程度高
代码模块化
如何使用JSX（JSX语法）
两种注释
<!DOCTYPE html>
<html lang="zh-cn" <head>
<Meta charset="UTF-8" <title>jsx注释</title>
<script src="../build/react.js"></script>
"../build/react-dom.js""../build/browser.min.js" </head>
<body>
<div id="example"></div>
type="text/babel" ReactDOM.render(
<h1
/*
注释1
*/
name = "test" // 注释2
>Hello,world!</h1> document.getElementById('example')
);
</script>
</body>
</html>
css样式使用
className替代class属性
<title>jsx样式使用1className <style "text/css" .text-red{
color : red
}
</style>
render(
//元素不能直接写class因为在es是关键字，无法被识别。要使用className替换原来的属性。
//<h1 class='text-red'>Hello,world!</h1>,
<h1 className='text-red'>Hello document.getElementById( </script>
</html>
react使用css
<body>
<div <script var style = {
color : "red" //这里只能用驼峰命名不能用font-size
fontSize:'88px'
} ReactDOM.render(
<h1 style={style}>Hello也可以在React中使用style
//<h1 style={{color:'red'}}>Hello,170); background-color: inherit;"> document.'example')
) </script>
</body>
条件判断的四种写法
1.JSX不可以直接使用if判断，可以使用三元运算符替代if
<body>
var HelloWorld = React.createClass({
render: function () {
return <p>Hellothis.props.name ? this.props.name : "World"}</p>
}
}) //ReactDOM.render(<HelloWorld></HelloWorld>,document.body);
render(<HelloWorld name='Jerome'></HelloWorld>document.body);
</body>
2. 使用变量
createClass({
getName: if (name)
return this.name
else
return "World"
} render: var name = this.getName()</body>
this.getName()}</ //ReactDOM.render(<div><HelloWorld></HelloWorld></div>,106); background-color: inherit;"></body>
4. 使用比较运算符（||运算符）
function () {
// 左边如果有直就返回左边的，否则返回右边的。
this.props.name || </body>
万能的函数表达式
function (obj) {
if (obj. return obj. })(this)}</</body>
非DOM 属性介绍
React中有三个非DOM属性：dangerouslySetInnerHTML、ref、key
dangerouslySetInnerHTML：在JSX中直接插入HTML代码
ref：父组件引用子组件
key：提高渲染性能
React diff算法流程图
dangerouslySetInnerHTML
// dangerouslySetInnerHTML：在JSX中直接插入HTML代码
var rawHTML = {
__html: "<h1>I'm inner HTML</h1>"
ReactDOM.render(<div dangerouslySetInnerHTML={rawHTML}></div></body>
