2. React JSX语法及特点介绍

什么是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>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1
/*
注释1
*/
name = "test" // 注释2
>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

css样式使用
className替代class属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jsx样式使用1className</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<style type="text/css">
.text-red{
color : red
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
//元素不能直接写class因为class在es是关键字,无法被识别。要使用className替换原来的class属性。
//<h1 class='text-red'>Hello, world!</h1>,
<h1 className='text-red'>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
react使用css
<body>
<div id="example"></div>
<script type="text/babel">
var style = {
color : "red",
//这里只能用驼峰命名不能用font-size
fontSize:'88px'
};
ReactDOM.render(
<h1 style={style}>Hello, world!</h1>,
//也可以在React中使用style
//<h1 style={{color:'red'}}>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>

条件判断的四种写法

1. JSX不可以直接使用if判断,可以使用三元运算符替代if
<body>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>
}
});
//ReactDOM.render(<HelloWorld></HelloWorld>, document.body);
ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
</script>
</body>

2. 使用变量
<body>
<script type="text/babel">
var HelloWorld = React.createClass({
getName: function () {
if (this.props.name)
return this.props.name
else
return "World"
},
render: function () {
var name = this.getName();
return <p>Hello, {name}</p>
}
});
//ReactDOM.render(<HelloWorld></HelloWorld>, document.body);
ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
</script>
</body>
3. 大括号直接调用函数
<body>
<script type="text/babel">
var HelloWorld = React.createClass({
getName: function () {
if (this.props.name)
return this.props.name
else
return "World"
},
render: function () {
return <p>Hello, {this.getName()}</p>
}
});
//ReactDOM.render(<div><HelloWorld></HelloWorld></div>, document.body);
ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
</script>
</body>
4. 使用比较运算符(||运算符)
<body>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
// 左边如果有直就返回左边的,否则返回右边的。
return <p>Hello, {this.props.name || "World"}</p>
}
});
//ReactDOM.render(<div><HelloWorld></HelloWorld></div>, document.body);
ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
</script>
</body>

万能的函数表达式
<body>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return <p>Hello, {(function (obj) {
if (obj.props.name)
return obj.props.name
else
return "World"
})(this)}</p>
}
});
//ReactDOM.render(<div><HelloWorld></HelloWorld></div>, document.body);
ReactDOM.render(<HelloWorld name='Jerome'></HelloWorld>, document.body);
</script>
</body>

非DOM 属性介绍


        React中有三个非DOM属性:dangerouslySetInnerHTML、ref、key
        dangerouslySetInnerHTML:在JSX中直接插入HTML代码
        ref:父组件引用子组件
        key:提高渲染性能

        React diff算法流程图
        2. React JSX语法及特点介绍2. React JSX语法及特点介绍

dangerouslySetInnerHTML
<body>
<script type="text/babel">
// dangerouslySetInnerHTML:在JSX中直接插入HTML代码
var rawHTML = {
__html: "<h1>I'm inner HTML</h1>"
};
var HelloWorld = React.createClass({
render: function () {
return <p>Hello, World</p>
}
});
ReactDOM.render(<div dangerouslySetInnerHTML={rawHTML}></div>, document.body);
</script>
</body>


代码
        查看代码 

上一篇:C语言学习笔记--指针与字符串


下一篇:转载:C# this.invoke()作用 多线程操作UI 理解二