JSX初学习

JSX学习总结

定义

JSX：是JS的语法扩展，在js代码中编写类似于html的标签；看起来像html，实际上是语法糖；最终会被转译成JS

const ele = <h1>Hello, sys and wcq</h1>

特点

1. 易于理解 语法接近html，易上手
2. 组件化 支持组件化开发，可以通过自定义组件来封装逻辑和UI

function myH1() {return <h1>Hello, sys and wcq</h1>
}

3. 嵌套结构 可以在一个JSX标签内嵌套其他标签

const ele = (<div><h1>hello, sys</h1><h2>hello, wcq</h2></div>
)

功能

1. 支持表达式 可以在{ }中嵌入JS表达式

const name = "SunYingsha"
const ele = <h1>hello, {{ name }}</h1>

2. 属性传递 在JSX中，可以设置元素属性

const ele = <img src="img.jpg" alt="sysImg">

3. 事件处理

function btnClick(){alert('Btn Click')
}
const ele = <button onClick={ btnClick }>click</button>

JSX与JS的关系

1. 转换 JSX看起来像html，编译过程中会被转换为JS对象（React使用Babel等工具将JSX转换为React.createElement调用）

const ele = <h1>SYS and WCQ</h1>
--->
const ele = React.createElement('h1',null,'SYS and WCQ')

2. 语法限制 JSX的标签必须闭合，且只能返回一个根元素

// √√√
const ele = (<div><p>SYS</p><p>WCQ</p></div>
)    
//  ×××
const ele = (<p>SYS</p><p>WCQ</p>
)   

优点

1. 提高开发效率 将HTML和JS逻辑结合在一起，提高前端开发效率，减少了上下文的切换时间
2. 代码可读性 JSX语法接近HTML，使代码结构更加直观，容易理解
3. 强大的功能

总结

最近项目也差不多结束，准备五一过后开始复习基础知识，前面的感觉也忘的差不多了，看学长学姐们面试也是压力剧增，准备一边复习知识，一边学习React，尝试用React写一写项目之类的