1、JSX 简介
JSX 是 JavaScript XML 的简写,表示在 JavaScript 代码中写XML(HTML)格式的代码。
优势:声明式语法更加直观,与HTML结构相同,降低了学习成本、提升开发效率。
JSX 是 React 的核心内容。
总结
1、推荐使用JSX语法创建React元素
2、写JSX就跟写HTML一样,更加直观、友好
3、JSX语法更能体现React的声明式的特点(描述UI长什么样子)
4、使用步骤
4.1、使用JSX创建react元素
const title = <h1>Hello JSX</h1>
4.2、渲染react元素
ReactDOM.render(title, 挂载点)
5、为什么脚手架中可以使用 JSX 语法 ?
JSX 不是标准的 ECMAScript 语法,它是 ECMAScript 的扩展语法
需要使用 babel 编译处理后,才能在浏览器环境中使用
create-react-app 脚手架已经有默认该配置,无需手动配置
编译 JSX 语法的包为:@babel/preset-react。
2、JSX中使用JavaScript表达式
数据存储在JS中
语法:{ JavaScript 表达式 }
注意:语法是单大括号,不是双大括号 !
const name = '码农权';
const div = (
<div>你好、我叫:{name}</div>
)
注意点
1、React的元素属性名使用驼峰命名法
2、特殊属性名:class -> className for -> htmlFor
3、没有子节点的React元素可以用 /> 结束
4、推荐:使用小括号包裹JSX,从而避免 JS 中的自动插入分号陷阱
const div = (
<div>Hello JSX</div>
)
3、条件渲染
场景:loading效果
条件渲染:根据条件渲染特定的JSX结构
可以使用if/else或三元运算符或逻辑运算符来实现
let isLoading = true;
const loadData = ()=>{
return isLoading ? (<div>loading...</div>) : (<div>数据加载完成,此处实现加载后的数据</div>);
}
const title = (
<h1>
条件渲染:
{ loadData() }
</h1>
)
4、列表渲染
如果要渲染一组数据,应该使用数组的 map() 方法
注意:渲染列表时应该添加key属性,key 属性的值要保证唯一
原则:map() 遍历谁,就给谁添加 key 属性
注意:尽量避免使用索引号作为 key
const students = [
{ id: 1, name: 'zs' },
{ id: 2, name: 'ls' },
{ id: 3, name: 'ww'}
];
const list = (
<ul>
{ students.map( item => <li key={item.id}>{item.name}</li> ) }
</ul>
)
5、样式的处理
行内样式 style
<h1 style={ { color: 'red', backgroundColor: 'skyblue' } }>
Hello 码农权
</h1>
类名 className(推荐)
<h1 className="title">
Hello 码农权
</h1>
JSX 总结
1、JSX是React的核心内容。
2、JSX表示在JS代码中编写HTML结构,是React声明式的体现。
3、使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构。
4、推荐使用 className 的方式给JSX添加样式。