所有的demo源码:https://github.com/Ching-Lee/react-base
1.什么是JSX
JavaScript XML
JSX是：
- 基于ECMAScript的一种新特性
- 一种定义带属性树结构的语法
JSX不是： - XML或者HTML
2.为什么使用JSX
- 类XML语法容易接受
- 增强JS语义
- 结构清晰
- 抽象程度高
- 代码模块化
3.如何使用JSX
3.1 JSX注释
在标签包裹的内容区添加注释，需要用大括号{}，将注释包裹起来。
ReactDOM.render(<h1>Hello, world!{/*这里为内容区添加注释，可以使用多行及单行注释方法*/}</h1>,document.body);
3.2 使用表达式
- 将表达式嵌入标签内容，使用{}括起来， demo02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSX demo</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
const user={
firstName:'Harper',
lastName:'Perez'
};
//格式化名字的方法
function formatName(user){
return user.firstName + ' '+user.lastName;
}
//判断user是否为null，返回不同元素
function getGreeting(user){
if(user)
return <h1>Hello,{formatName(user)}!</h1>;
else
return <h1>Hello,Stranger</h1>;
}
//两个参数，一个是标签，一个是放置的位置。这里是在body中放入h1标签
ReactDOM.render(getGreeting(user),document.body);
</script>
</body>
</html>
demo02
- 使用表达式指定属性
const element = <img src={user.avatarUrl}></img>;
如果标签内容为空，可以使用 />
const element = <img src={user.avatarUrl} />;
- JSX设置css
//设置css样式，采用驼峰命名法
let style={
color:"red",
backgroundColor:"gray"
};
//判断user!=null，返回元素
function getGreeting(user){
if(user)
return <h1 style={style}>Hello,{formatName(user)}!</h1>;
else
return <h1>Hello,Stranger</h1>;
}
3.3 JSX标签是可以包括子节点的
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
3.4 非DOM属性
dangerouslySetInnerHTML、ref、key
dangerouslySetInnerHTML：在JSX中直接插入HTML代码。
ref:父组件引用子组件
key:提高渲染性能
内容类似的组件尽量合并成同一个组件，列表类型的元素加上key。
React diff算法流程图
4.安全性
JSX能够防止注入攻击，在JSX中嵌入用户输入是安全的。
默认情况下，React DOM在呈现之前，会转义在JSX中嵌入的任何值。因此，它确保您永远不能插入在应用程序中没有显式编写的任何东西。在呈现之前，所有内容都转换为字符串。这有助于防止XSS(跨站脚本)攻击。
//潜在的恶意输入
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
5.JSX代表的是对象
Babel将JSX编译为response .createelement()调用。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
与如下写法相同
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
6.JSX解释器架构介绍
网友评论