【综合案例】使用React编写B站评论案例

一、效果展示

默认效果，一开始默认按照最热进行排序

发布了一条评论

按照最新进行排序

按照最新进行排序

二、效果说明

页面上默认有3条评论，且一开始进入页面的时候是按照点赞数量进行倒序排列展示，可以点击【最热 、最新】进行排序的切换。

在文本框中输入要评论的文本，然后点击【发布】按钮，即可将评论添加到下方的评论列表当中进行展示；如果没有输入任何文本的时候直接点击【发布】按钮会弹出提示对话框。

点击删除按钮可以将对应的评论从评论列表中移除。

三、涉及知识点

3.1 useState

3.1.1 基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果。

🚩 语法：

const [state, setState] = useState(initialState)

1. useState是一个函数，返回值是一个数组 
2. 数组中的第一个参数是状态变量；第二个参数是set函数，用来修改状态变量
3. useState的参数将作为state的初始值

🚩 本质：

和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）。

注意事项：

• useState 是一个 Hook，因此你只能在 组件的顶层 或自己的 Hook 中调用它。你不能在循环或条件语句中调用它。如果你需要这样做，请提取一个新组件并将状态移入其中。
• 在严格模式中，React 将 两次调用初始化函数，以