【React学习打卡第一天】

一、React是什么

构建Web和原生交互界面的库

二、优势

相较于其它前端框架的优势

组件化的开发方式 不错的性能

相较于传统基于DOM开发的优势

丰富的生态 跨平台支持

三、搭建环境

命令：npx create-react-app react-basic
cd到项目文件目录下再npm start即可启动

四、jsx

1.概念

JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模版结构,它是React中编写
UI模版的方式

2.本质

JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过babel解析工具做解析之后才能
在浏览器中运行

3.在jsx中使用js表达式

在JSX中可以通过 大括号语法{} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等

(1). 使用引号传递字符串
(2). 使用JavaScript变量
(3). 函数调用和方法调用
(4.) 使用JavaScript对象

五、实现渲染

1.列表渲染

注意：不写key后台会报错

2.基础条件渲染

3.复杂条件渲染

六、React中的事件绑定

语法：on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

1.使用事件对象参数

语法：在事件回调函数中设置形参e

2.传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

3.同时传递事件对象和自定义参数

语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

七、React中的组件

1.概念

一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次

2.使用

在React中，一个组件就是首字母大写的函数（任何形式），渲染组件只需要把组件当成标签书写

3.useState

基础使用

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

修改状态的规则

（1）.状态不可变

在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

（2）.修改对象状态

规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改

将name的属性值从jack改为john:

4.组件的样式处理

行内样式（不推荐）

class类名控制

八、b站评论案例

1.功能要求

2.渲染列表

核心思路：使用useState维护评论列表;使用map方法对列表数据进行遍历渲染（别忘了加key）

列表项用map遍历渲染，如果渲染的结构比较复杂，可以写一个小括号，再把渲染的结构粘贴上去

将静态数据改为表达式：

3.删除

需求：
只有自己的评论才显示删除按钮
点击删除按钮，删除当前评论，列表中不再显示

核心思路
删除显示 - 条件渲染 ; 删除功能 - 拿到当前项id以id为条件对评论列表做filter过滤

步骤1：

步骤2：

4.渲染Tab+点击高亮实现

需求：
点击哪个tab项，哪个做高亮处理

核心思路：点击谁就把谁的type（独一无二的标识）记录下来，然后和遍历时的每一项的type做匹配，谁匹配到就设置负责高亮的类名

遍历渲染：

点击后拿到type值：

记录点击tab的type：

将记录的type值和遍历每项的type做条件匹配，匹配则被激活（点击后实现高亮效果）

4.排序功能

需求：点击最新，评论列表按照新的在前排列，点击最热，按照多的在前排列

核心思路：把评论列表状态数据进行不同的排序处理，当成新值传递给set函数重新渲染视图

推荐工具排序：lodash
官网：https://lodash.com/
安装：npm i --save lodash

如果orders未指定，则所有值均按升序排序。否则，指定“desc”以表示降序，或指定“asc”以表示相应值的升序排序。

例子：

5.classnames库

classnames是一个简单的JS库，可以非常方便的通过条件动态控制class类名的显示

之前的classname代码：

缺点：字符串的拼接方式不够直观，也容易出错

使用classnames库之后：
安装命令：npm install classnames
引入：

改写后：