一、什么是JSX?
const element = <h1>Hello,world!</h1>
上面这个语句既不是字符串也不是HTML。它就被称为JSX,它是JavaScript的语法扩展。
二、为什么选择JSX?
React认为渲染逻辑本质上与其他UI逻辑耦合这一事实:事件如何处理,状态如何随时间变化,以及数据如何准备显示。React不是通过将标记和逻辑放在单独的文件中来人为地分离技术,而是将问题与称为“组件”的松散耦合单元分开,这些单元包含两者。
三、JSX中嵌入表达式
const name = 'J0sh Perez';
const element = <h1>Hello,{name}</h1>;
ReactDOM.render(
element,
document.getElement('root')
);
在JSX中的大括号内可以放置任何有效的JavaScript表达式。下面将调用JavaScript函数的结果嵌入formatName到<h1>中
function frormatName(user){
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName:'Harper',
lastName:'Perez'
};
const element = (
<h1>
Hello,{formatName(nuser)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
四、JSX也是一个表达式
编译之后,JSX表达式成为常规JavaScript哈数调用并评估为JavaScript对象。意味着可以在if语句和for语句中使用JSX,将其分配给变量,接受它作为参数,并从函数返回它。
function getGreeting(user){
if(user){
return <h1>Hello, {foematName(user)}!</h1>;
} else {
return <h1>Hello,Stranger.</h1>
}
}
五、使用JSX指定属性
1、使用引号将字符串文字指定为属性
const element = <div tabIndex="0"></div>
2、还可以使用花括号在属性中嵌入JavaScript表达式
const element = <img src={user.avatarUrl}><img>
由于JSX更接近JavaScript而不是HTML,因此React DOM使用cameCase属性命名约定而不是HTML属性名称。
六、用JSX指定孩子
1、如果标记为空,您可以立即将其关闭 />,如:
const element = <img src={user.avatarUrl} />;
2、JSX标签可能包含子项:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to use you here.</h2>
</div>
);
七、JSX防止注入攻击
在JSX中嵌入用户输入是安全的;
const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>
ReactDOM会在渲染之前转义JSX中嵌入的任何值。在渲染之前,所有的东西都被转换为字符串。这有助于防止XSS(跨站点脚本)攻击。
八、JSX代表对象
Babel将JSX编译为React.createElement()调用。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className:'greetong'},
'Hello,world!'
)
const element = {
type:'h1',
props:{
className:'greeting',
children:'Hello,world!'
}
}