目录
React 安装
- npm i react react-dom
- npm init -y(生成基础目录文件)
<!-- 引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
React基本使用
- 创建react元素
// 创建react元素
const title = React.createElement(元素名称, 元素属性(可以是对象), 元素子节点);
// 高级使用
const title = React.createElement(
"h1",
{ title: "标题", id: 01 },
"束带结发",
React.createElement("span", null, "span节点")
);
- 渲染元素
ReactDOM.render(要渲染的react元素, 挂载点);
React脚手架
- 初始化项目
npx create-react-app my-app
- 启动项目
npm start|| yarn start
脚手架使用React
- 导入react和react-dom包
// 1、导入react
import React from "react";
import ReactDOM from "react";
JSX基本使用
- 使用JSX创建react元素
// 使用JSX创建react元素
const title = <h1>使用JSX创建react元素</h1>
- 渲染react元素
/ 渲染react元素
ReactDOM.render(title,document.getElementById('root'))
JSX列表渲染
- 技术方案:return,map重复渲染的模板;
- 注意事项:遍历列表时需要一个类型为number/string不可重复的key,提交diff性能
- key仅在内部使用,不会出现再真实的dom中
const songs = [
{ id: 1, name: '痴心绝对' },
{ id: 2, name: '像我这样的人' },
{ id: 3, name: '南山南' }
]
function App() {
return (
<div className="App">
<ul>
{songs.map(song=><li key={song.id}>{song.name}</li>)}
</ul>
</div>
);
}
JSX条件渲染
- 技术方案:三元表达式-满足条件-渲染一个span
- &&
// 技术方案:三元表达式-满足条件-渲染一个span
const flag = true
// &&
function App() {
return (
<div className="App">
{flag ? <div>
<span>span</span>
</div>:null}
{true && <span>spantow</span>}
</div>
);
}
JSX模板精简
- 原则:模板中的逻辑尽量保持精简
- 复杂的多分支逻辑,收敛为一个函数,通过一个专门的函数来写分支逻辑,模板中只负责调用
// 一个状态type 1 2 3
// 1-> h1
// 1-> h2
// 1-> h3
// 原则:模板中的逻辑尽量保持精简
// 复杂的多分支逻辑,收敛为一个函数,通过一个专门的函数来写分支逻辑,模板中只负责调用
const getHtag = (type)=>{
if(type === 1){
return <h1>h1</h1>
}
if(type === 2){
return <h1>h2</h1>
}
if(type === 3){
return <h1>h3</h1>
}
}
function App() {
return (
<div className="App">
{getHtag(1)}
{getHtag(2)}
{getHtag(3)}
</div>
);
}
JSX样式控制
- 行内样式:在元素身上绑定一个style属性
- 类名样式:在元素身上绑定className属性
- 动态类名控制
// 样式控制
// 行内样式:在元素身上绑定一个style属性
// 类名样式:在元素身上绑定className属性
import './app.css'
const style = {
color:'red',fontSize:'30px'
}
// 动态类名控制
const activeFlag = true
function App() {
return (
<div className="App">
<span style={{color:'red',fontSize:'30px'}}>span</span>
<span style={style}>span</span>
<span className="active">span</span>
<span className={activeFlag ? 'active': ''}>动态span</span>
</div>
);
}
JSX综合案例
- 技术方案:map遍历列表
- 动态类名的控制
import './index.css'
import avatar from './images/avatar.png'
// 依赖的数据
const state = {
// hot: 热度排序 time: 时间排序
tabs: [
{
id: 1,
name: '热度',
type: 'hot'
},
{
id: 2,
name: '时间',
type: 'time'
}
],
active: 'hot',
list: [
{
id: 1,
author: '刘德华',
comment: '给我一杯忘情水',
time: new Date('2021-10-10 09:09:00'),
// 1: 点赞 0:无态度 -1:踩
attitude: 1
},
{
id: 2,
author: '周杰伦',
comment: '哎哟,不错哦',
time: new Date('2021-10-11 09:09:00'),
// 1: 点赞 0:无态度 -1:踩
attitude: 0
},
{
id: 3,
author: '五月天',
comment: '不打扰,是我的温柔',
time: new Date('2021-10-11 10:09:00'),
// 1: 点赞 0:无态度 -1:踩
attitude: -1
}
]
}
function formatTime(time){
// 时间格式化 2022-02-28
return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
}
function App () {
return (
<div className="App">
<div className="comment-container">
{/* 评论数 */}
<div className="comment-head">
<span>5 评论</span>
</div>
{/* 排序 */}
<div className="tabs-order">
<ul className="sort-container">
{state.tabs.map(item => <li key={item.id} className={item.type === state.active ? 'on' : ""}>按{item.name}排序</li>)}
</ul>
</div>
{/* 添加评论 */}
<div className="comment-send">
<div className="user-face">
<img className="user-head" src={avatar} alt="" />
</div>
<div className="textarea-container">
<textarea
cols="80"
rows="5"
placeholder="发条友善的评论"
className="ipt-txt"
/>
<button className="comment-submit">发表评论</button>
</div>
<div className="comment-emoji">
<i className="face"></i>
<span className="text">表情</span>
</div>
</div>
{/* 评论列表 */}
<div className="comment-list">
{state.list.map(item=>(
<div className="list-item" key={item.id}>
<div className="user-face">
<img className="user-head" src={avatar} alt="" />
</div>
<div className="comment">
<div className="user">{item.author}</div>
<p className="text">{item.comment}</p>
<div className="info">
<span className="time">{formatTime(item.time)}</span>
{/* 动态类名控制 */}
<span className={item.attitude === 1 ? 'like liked' : 'like'}>
<i className="icon" />
</span>
<span className={item.attitude === 1 ? 'hate hated' : 'hate'}>
<i className="icon" />
</span>
<span className="reply btn-hover">删除</span>
</div>
</div>
</div>
))}
</div>
</div>
</div>
)
}
export default App