了解JSX
在React中使用JSX
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JSX</title>
</head>
<body>
JSX
<!-- JSX
概念：JSX是JavaScript和XML的缩写，表示在js代码中编写HTML
模板结构，它是React中编写UI模板的方式
优势：HTML的声明模板写法，JS的可编程能力
本质：JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具左解析之后才能在浏览器中运行
-->
JSX中使用JS表达式
<!--JSX中使用JS表达式
在JSX中可以通过大括号语法{}识别JavaScript中的表达式，比如常见的变量，函数调用，方法调用等等
1.使用引号传递字符串
2.使用JavaScript变量
3.函数调用和方法调用
4.使用JavaScript对象
-->
<!--
const count =100
function getname(){
return 'jack'
}
function App() {
// return里面就是JSX
return (
<div className="App">
this is app
{/* 字符串 */}
{'this is message'}
{/* JavaScript变量 */}
{count}
{/* 函数调用 */}
{getname()}
{/* 方法调用 */}
{new Date().getDate()}
{/* JS对象 */}
<div style={{color:'red'}}>this is div</div>
{/* 外层{}是识别表达式的语法，内层{}是识别对象结构 */}
{/* 注意：只有表达式可以识别，if语句，switch语句，声明变量属于语句，不是表达式，不能出现在{}中*/}
-->
渲染列表
<!-- 渲染列表
const list = [
{ id: 1001, name: 'Vue' },
{ id: 1002, name: 'React' },
{ id: 1003, name: 'Angular' }
]
<div className="App">
{/* 渲染列表 */}
{/* map 循环哪个结构 return结构 */}
{/* 注意事项：加上一个独一无二的key 字符串或者number id */}
{/* key的作用：React框架内部使用 提升更新性能的 */}
<ul>
{list.map(item => <li key ={item.id} >{item.name}</li>)}
</ul>
</div>
-->
JSX中实现条件渲染
<!-- 语法：在React中可以通过逻辑与运算符&&，三元表达式(?:)实现基础的条件渲染 -->
<!--
const isLogin = true
function App () {
return (
<div className="App">
{/* 逻辑与 && */}
{isLogin && <span>this is span</span>}
{/* 三元运算 */}
{isLogin ? <span>jack</span> : <span>loading...</span>}
</div>
)
}
-->
复杂条件渲染
<!--
// 定义文章类型
const articleType = 3 // 0 1 3
// 定义核心函数（根据文章类型返回不同的JSX模版）
function getArticleTem () {
if (articleType === 0) {
return <div>我是无图文章</div>
} else if (articleType === 1) {
return <div>我是单图模式</div>
} else {
return <div>我是三图模式</div>
}
}
function App () {
return (
<div className="App">
{/* 调用函数渲染不同的模版 */}
{getArticleTem()}
</div>
)
}
-->
React基础事件绑定
<!-- 基础语法：on+事件名称 = {事件处理程序}，整体上遵循驼峰命名法
使用事件对象参数，语法：在事件回调函数中设置形参e
注意：不能直接写函数调用，这里事件绑定需要一个函数引用
// 基础绑定
// const handleClick = () => {
// console.log('button被点击了')
// }
return (
<div className="App">
<button onClick={handleClick}>click me </button>
</div>
// 事件参数e
// const handleClick = (e) => {
// console.log('button被点击了', e)
// }
return (
<div className="App">
<button onClick={handleClick}>click me </button>
</div>
// 传递自定义参数
// const handleClick = (name) => {
// console.log('button被点击了', name)
// }
return (
<div className="App">
<button onClick={() => handleClick('jack')}>click me </button>
</div>
// 既要传递自定义参数 而且还要事件对象e
const handleClick = (name, e) => {
console.log('button被点击了', name, e)
}
return (
<div className="App">
<button onClick={(e) => handleClick('jack', e)}>click me </button>
</div>
)
}
-->
</body>
</html>