JSX初学习
文章目录
- JSX学习总结
- 定义
- 特点
- 功能
- JSX与JS的关系
- 优点
- 总结
JSX学习总结
定义
JSX：是JS的语法扩展，在js代码中编写类似于html的标签；看起来像html，实际上是语法糖；最终会被转译成JS
const ele = <h1>Hello, sys and wcq</h1>
特点
- 易于理解 语法接近html，易上手
- 组件化 支持组件化开发，可以通过自定义组件来封装逻辑和UI
function myH1() {return <h1>Hello, sys and wcq</h1>
}
- 嵌套结构 可以在一个JSX标签内嵌套其他标签
const ele = (<div><h1>hello, sys</h1><h2>hello, wcq</h2></div>
)
功能
- 支持表达式 可以在{ }中嵌入JS表达式
const name = "SunYingsha"
const ele = <h1>hello, {{ name }}</h1>
- 属性传递 在JSX中，可以设置元素属性
const ele = <img src="img.jpg" alt="sysImg">
- 事件处理
function btnClick(){alert('Btn Click')
}
const ele = <button onClick={ btnClick }>click</button>
JSX与JS的关系
- 转换 JSX看起来像html，编译过程中会被转换为JS对象（React使用Babel等工具将JSX转换为React.createElement调用）
const ele = <h1>SYS and WCQ</h1>
--->
const ele = React.createElement('h1',null,'SYS and WCQ')
- 语法限制 JSX的标签必须闭合，且只能返回一个根元素
// √√√
const ele = (<div><p>SYS</p><p>WCQ</p></div>
)
// ×××
const ele = (<p>SYS</p><p>WCQ</p>
)
优点
- 提高开发效率 将HTML和JS逻辑结合在一起，提高前端开发效率，减少了上下文的切换时间
- 代码可读性 JSX语法接近HTML，使代码结构更加直观，容易理解
- 强大的功能
总结
最近项目也差不多结束，准备五一过后开始复习基础知识，前面的感觉也忘的差不多了，看学长学姐们面试也是压力剧增，准备一边复习知识，一边学习React，尝试用React写一写项目之类的