react中JSX基础与useState的基本使用 + 评论显示删除需求案例

参考视频：https://www.bilibili.com/video/BV1ZB4y1Z7o8/?p=3&spm_id_from=pageDriver&vd_source=5c584bd3b474d579d0bbbffdf0437c70

如果没有安装create-react-app需要先全局安装

命令：npm i -g create-react-app

1.快速搭建开发环境

create-react-app是一个快速创建react开发环境的工具，底层由webpack构建，封装了配置细节，开箱即用
执行命令：

npx create-react-app react-basic

npx Node.js工具命令，查找并执行后续的包命令
create-react-app 核心包(固定写法)，用于创建react项目
react-basic React项目的名称(可以自定义)
创建React项目的更多方式：https://zh-hans.react.dev/learn/start-a-new-react-project

2.项目文件

src/index.js ==> 入口文件
src/App.js ==>导入项目的根组件

3.JSX基础：概念和本质

概念：
JSX是Javascript和XML（HTML）的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方式
优势：

HTML的声明式模板写法
JS的可编程能力

本质：
JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行。 (babel解析工具)
babel网址：babeljs.io ，可以在左边输入js代码看右边编译在浏览器运行的代码，需要把react勾上才能解析JSX
高频场景：

JSX中使用JS表达式：在JSX中可以使用大括号语法{}识别Javascript中的表达式，比如常见的变量、函数调用、方法调用等等。
1.使用引号传递字符串 2.使用Javascript变量 3.函数调用和方法调用 4.使用Javascript对象

function getName() {return 'jack'
}
function Contuer() {const count = 100;return(<div>{/* 1.使用引号传递字符串, 字符串识别 */}{ 'this is message' }{/* 2.使用Javascript变量, 识别js变量 */}{ count }{/* 3.函数调用和方法调用 */}{ getName() } {/* 调用函数显示的是函数的返回值 */}{ new Date().getDate() } {/* 方法调用 */}{/* 4.使用Javascript对象, {}外层是识别对象的 */}<div style={{color: 'red'}}>this is div</div></div>)
}

注意：if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中

4.JSX基础-实现列表渲染

在这里插入图片描述
map循环哪个结构直接return结构，通过map渲染需要绑定独一无二的key 字符串或者number，key的作用：React框架内部使用提升更新性能的

5.JSX基础-实现条件渲染

在这里插入图片描述
语法：在React中，可以通过逻辑与运算符&&、三元表达式(?:)实现基础的条件渲染

{flag && <span>this is span</span>} // 判断一种情况，如果flag为true,span就显示，否则span不显示
{loading ? <span>loading...</span> : <span>加载完成</span>} // 两种情况(多个)，loading为true就显示loading...，否则显示加载完成

6.JSX基础-复杂条件渲染

在这里插入图片描述

需求：列表中需要根据文章状态适配三种情况，单图、三图和无图三种模式
解决方案：自定义函数 + if 判断语句

const articleType = 3 // 0 1 3三种模式
function getArticleTem() {// 可以用switch做if (articleType === 0) {return <div>无图</div>} else if (articleType === 1) {return <div>一图</div>} else {return <div>三图</div>}
}
function Couter() {return(<div>{ getArticleTem() } {/* 调用函数渲染不同的模板 */}</div>)
}

8.React中的时间绑定

语法： on + 事件名称 = { 事件处理程序 }, 整体上遵循驼峰命名法
在这里插入图片描述

使用事件对象参数
传递自定义参数
同时传递事件对象和自定义参数

9.React组件基础使用

组件是什么？
概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次
在这里插入图片描述
组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用
在React中，一个组件就是首字母大写的函数(规定好的)，内部存放了组建的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可

function Button(){return <button>click me</button>
}
不一定非要function Button(){},  const Button = () => {}也是可以的，只要是首字母大写的函数就是组件
const Button = () => {return <button>click me</button>
}

10.useState基础使用

useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
本质：和普通JS变量不同的是，状态变量一旦发生变化组建的视图UI也会跟着变化（数据驱动视图）
在这里插入图片描述

useState修改状态的规则
修改对象状态

11.React组件基础样式控制

组件基础样式方案

使用style={{fontSize: '20px'}时，如果样式有带-的要改为驼峰写法}。使用class时<span className="class-name">span...</span>class要改为className

12.评论案例

在这里插入图片描述

12.1 列表渲染

思路：

使用useState维护评论列表
使用map方法对列表数据进行遍历渲染(别忘了加key)

-------------------------------------思考：为什么要用useState来维护评论列表？-----------------------------------
因为函数组件没有生命周期，执行完毕就结束了，即使值改变了，视图也不会更新。而用useState保存的数据改变之后会更新视图如图所示：
在这里插入图片描述
当点击事件发生，console.log(‘执行了’)也只会打印刚加载的一次，数据已经加上去了，但是视图还是两项没有更新

--------------------------------------------------思考结束：分割线--------------------------------------------

// 项目的根组件，组件从这往下分散
// App -> 引入到index.js -> 被里面的代码渲染到 public/index.html(root)import { useState } from 'react';
const list = [{name: 'jack',content: '这是评论回复111',time: '2023-6-10',likeNum: 100,uid: '1'},{name: 'rose',content: '这是评论回复222',time: '2023-6-11',likeNum: 230,uid: '2'}
]
const user = {uid: '3002017',avatar: '',uname: '张三'
}// 渲染评论列表
// 1.使用useState维护list
function App() {const [commentList, setCommentList] = useState(list);return (<div className="App"><span>评论{commentList.length}</span> <button>最新</button>|<button>最热</button><div>{user.uname}<input /><button>发布</button></div><div>{commentList.map(item => {return (<div key={item.uid}><div>{item.name}</div><div>{item.content}</div><div><span>{item.time}</span><span>点赞数：{item.likeNum}</span><button>删除</button></div></div>)})}</div></div>);
}export default App;

实现评论删除
做两件事情：删除按钮判断当前项里的uid是否等于用户uid,如果相等则显示删除按钮，如果不等不显示删除按钮
给删除按钮绑定点击事件，当点击删除按钮时传入当前项的uid，在事件中用数组过滤掉当前项

const handleDelete = (uid) => {setCommentList(commentList.fliter(item => item.uid !== uid));
}

12.2 渲染tab + 点击高亮实现

在这里插入图片描述
map渲染tab数组之后，绑定一个点击事件，传当前项的type，判断当前项的type是否等于一个记录的值，如果相等就让字体颜色高亮

const [tabType, setTabType] = useState(0);
const handleTab = (type) => {setTabType(type);
}return内：
{tab.map(item => <span key={item.type} style={{color: tabType === item.type? 'blue' : '#aaa'}} onClick="() => handleTab(type)">{item.value}</span>)}

12.3 排序功能实现

在这里插入图片描述

排序可以使用lodash,会生成一份全新的数据，不会更改老数据
lodash官网：lodash.com / lodash.com/docs/

如果需要进来就按第一个高亮的排序，就在初始加载数据那排序
用array.sort()给数组排序

// 项目的根组件，组件从这往下分散
// App -> 引入到index.js -> 被里面的代码渲染到 public/index.html(root)import { useState } from 'react';
const list = [{name: 'jack',content: '这是评论回复111',time: '2023-6-10',likeNum: 100,uid: '1'},{name: 'rose',content: '这是评论回复222',time: '2023-6-11',likeNum: 230,uid: '2'},{name: '张三',content: '这是评论回复333',time: '2023-6-9',likeNum: 320,uid: '3'},
]
const tab = [{type: 'time',value: '最新'},{type: 'likeNum',value: '最热'}
]
const user = {uid: '3',avatar: '',uname: '张三'
}// 渲染评论列表
// 1.使用useState维护list
function App() {const [commentList, setCommentList] = useState(list);const [tabType, setTabType] = useState();const handleDelete = (uid) => {// 拿到需要删除uid的评论setCommentList(commentList.filter(item => item.uid !== uid ));}const hanldeTab = (type) => {// 拿到点击的type值setTabType(type);// 基于列表的排序if (type === 'time') {// 根据时间排序setCommentList(commentList.sort((a,b) => {return new Date(b.time).getTime() - new Date(a.time).getTime();}))} else {// 根据点赞数排序setCommentList(commentList.sort((a,b) => {return b.likeNum - a.likeNum;}))}}return (<div className="App"><span>评论{commentList.length}</span>{tab.map(item => <span key={item.type} style={{padding: '9px',color: tabType === item.type ? 'blue' : '#aaa', cursor: 'pointer'}}onClick={() => hanldeTab(item.type)}>{item.value}</span>)}<div>{user.uname}<input /><button>发布</button></div><div>{commentList.map(item => {return (<div key={item.uid}><div>{item.name}</div><div>{item.content}</div><div><span>{item.time}</span><span>点赞数：{item.likeNum}</span>{ item.uid === user.uid && <button onClick={() => handleDelete(item.uid)}>删除</button> }</div></div>)})}</div></div>);
}export default App;

12.4发表评论

1.获取评论内容
const [content, setContent] = useState();<input type="text" value={content} onChange={(e) => setContent(e.target.value)}>2.点击发布按钮发布评论
const handlePublish = () => {setCommentList([...commentList,{name: user.uname,content: content,time: new Date(),likeNum: 0,uid: user.uid}])
}
<button onClick={handlePublish}></button>

在这里插入图片描述

随机id可以使用uuid： git上搜索：uuidjs/uuid
日期时间格式化可以使用dayjs：dayjs官网：dayjs.gitee.io/zh-CN/

在这里插入图片描述

12.5清空内容并重新聚焦

在这里插入图片描述

import { useRef, useState } from 'react';
const [content, setContent] = useState(''); // 绑定input的value需要加初始值，否则会报错
const inputRef = useRef(null);
const handlePublish = () => {// ...做发布的逻辑// 1.清空输入框的内容setContent('');// 2.重新聚焦 dom(useRef) - focus()inputRef.current.focus();
}<input type="text" ref={inputRef} value={content} onChange={(e) => setContent(e.target.value)} />
<button onClick={handlePublish}>发布</button>

13.classnames工具优化类名控制

在这里插入图片描述
用classNames库之后使用方法：

1.命令安装classnames包
npm install classnames2.在组件中引入
import classNames from 'classname';3.在组件内使用, ‘’包裹的是静态的class, 
{// active是动态的class名，值是判断条件,是否需要加active这个classactive: type === item.type
}包裹的是动态的class从这样的：nav-item为静态class类名,active为动态class类名
<span className={`nav-item ${type === item.type && 'active'}`}>span...</span>变成这样：
<span className = {classNames('nav-item', {active: type === item.type
})}>span...</span>