JSX到底是什么？
- 一种标签语法，hs进行的语法拓展
- 不是字符串，不是HTML标签
- 描述UI呈现与交互的直观的形式
- 生成react元素
createElement与jsx对比
const rE1 = <h1>This is my first jsx experience </h1>;;
const rE1 =React.createElement('h1',{
className:'title'
},'This is my first JSX experience');
ReactDOM.render(
rE1,
document.getElementById('app')
);
jsx插值表达式
JSX遵循js的命名规范，一般使用
camelCase小驼峰,class=>className tabIndex =>tabIndex
{/*插值表达式*/
this.state.openStatus?'打开装填':'关闭状态'
}
为什么React不把视图表盒逻辑分开呢？
- 渲染和标签是有逻辑耦合
- 即使是这样的耦合，也能实现关注点分离
JSX插值表达式
表达式一切有效的（符合JS编程逻辑的）
表达式(title)JSX被编译以后->React元素->普通的对象
const rE1 =<h1 className ="title" >This is a title part </h1>
const rE12 = React.createElement('h1',{
className: 'title'
},'This is a title part')
console.log(rE1);
var mark = 'title';
function selectText(mark){
switch(mark){
case 'title':
return 'This is a title';
default:
return 'This is a paragraph'
}
}
function getText(mark){
if(mark === 'title'){
return <h1 className={mark}>
{selectText(mark)}
</h1>
}
return <p> {selectText(mark)} </p>
}
console.log(getText('title'));
var arr = {
{
id:1,
name:"张三"
}，
{
id:2,
name:"李四"
},
{
id:3,
name:"王五"
}
}
function setList (){
return{
<ul>
{
arr.map((item)=>{
return(
<l key={ item.id}>
<span> {item.id}</span>
<p> {item.name}</p>
</li>
)})
}
</ul>
}
}
const rE1 =setList();
ReactDOM.render{
rE1,
document.getElemnentById('app')
}
//单标签必须要闭合
const rE1 = <img src="" />;
//render之前
//所有约JSX都会转成字符串
// 所有输入的内容都会进行转义