react基础
JSX基础
- 概念：JSX是javascript XML（HTML)的缩写，表示在JS代码中书写HTML结构。
- 作用：在React中创建HTML结构（页面UI结构）
- React创建虚拟dom，渲染虚拟dom到页面上，不直接操作dom，减轻浏览器的负担。
创建虚拟dom的两种方式：
通过jsx（bable可以将jsx转为js；jsx可以将js代码格式转化，本质是用js的方法来完成）jsx是js的一种语法糖。
使用js（通过react的creatElement()等方法来创建，比较复杂）
创建ui方式
1、使用命令式语法创建UI
const h3 = React.createElement("h1", {
className: "aaa" }, "我是标题");
const list2 = React.createElement(
"ul",
null,
React.createElement("li", null, 111),
React.createElement("li", null, 222),
React.createElement("li", null, 333)
);
2、使用jsx语法声明式创建UI：
const h1 = <h1 className="aaa">我是标题</h1>;
const list = (
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
);
对比之下，命令式创建较为繁琐，且嵌套关系较深的话写起来比较复杂。
注意：
jsx语法不能同时存在多个根节点，如果有必要可以用幽灵节点作为根节点（在真实页面上并不会去渲染幽灵节点）
错误写法
return (
<div>{
getUI(1)}<div>
<div>222</div>
)
// 这是错误写法，JSX表达式必须具有一个父元素，就像vue2template下只能有一个父元素一样的意思
正确写法，可以使用幽灵节点 <></>
return {
// <></> 是空标签（幽灵节点），在真实页面上不会渲染这个节点
<>
<div>{
getUI(1)}<div>
<div>222</div>
</>
}
JSX的使用
步骤
1、使用JSX语法创建react元素
const title = <h1>HELLO JSX</h1>
2、使用 ReactDOM.render() 方法渲染元素到页面
ReactDOM.render(title,root)
完整代码
import React from 'react'
import ReactDOM from 'react-dom'
// 使用JSX创建react元素
const title = <h1>HELLO JSX</h1>
// 渲染react元素
ReactDOM.render(title,document.getElementById('root'))
JSX中使用JavaScript表达式
- 语法： { JavaScript表达式 }
- 注意：语法是
单大括号
const name = '张三'
const say = （） => 'Hello'
const title = (
<h1 className="title">
Hello, {
name}
<p>{
say()}</p>
<p>{
2>5 ? '大于' : '小于' }</p>
</h1>
)
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
JSX的条件渲染
1、使用 if else
let type = 1
const getUI = (type) => {
if(type == 1) return <div>111</div>
else if(type == 2) return <div>222</div>
else return null
}
// 外层div是JSX语法的根节点，每个JSX有且只有一个根节点
return <div>{
getUI(2) }</div>
2、使用逻辑与&&
return <div>
{
type == 1 && <div>111</div> }
{
type == 2 && <div>222</div> }
{
type == 3 && <div>333</div> }
</div>
3、三元表达式
const flag = true;
return flag ? (
<div className="app">show</div>
) : (
<div className="app">unShow</div>
)
// 或者
{
flag ?
<>
dom...
</>
:
<>
dom...
</>
}
JSX的样式
1、行内样式
注意是双大括号，第一层是JSX解析语法的大括号，第二层是装有设置style属性的对象
function App(){
return (
<div>
<div style={
{
display:'inline-block'}}"></div>
</div>
)
}
// 或者，把style里的样式属性提出来
function App(){
const styleObj = {
color: "red",
fontSize: '18px'
}
return (
<div style={
styleObj}></div>
)
}
2、类名样式
在元素上添加 className
import React from "react";
import ReactDOM from "react-dom";
import './index.css'
const songs = [
{
id: 1, name: '痴心绝对'},
{
id: 2, name: '像我这样的人'},
{
id: 3, name: '南山南'},
]
const list = (
<ul className="list">
{
songs.map(item => <li>{
item.name}</li>)}
</ul>
)
ReactDOM.render(list, document.getElementById('root'))
index.css
.list{
color: chocolate;
font-size: large;
}
可以使用三元表达式动态控制类名
const classFun = bd?'name1':'name2'
<div className={
`${
bd}`}>hello</div>
JSX的列表渲染
vue是使用v-for来进行列表渲染的，react则是使用 map 方法来进行列表渲染的
const list = [
{
id: "1", name: "icy" },
{
id: "2", name: "icy2号" },
{
id: "3", name: "icy3号" },
];
return (
<div className="App">
{
list.map((item) => {
return ( <div>{
item.name}</div> )
})}
</div>
)
React的生命周期
React组件传递参数
React使用脚手架创建项目
借鉴如下
