React学习笔记-详细版（项目搭建，JSX基础使用，组件通信，事件绑定）

1 、项目搭建

npx create-react-app react-basic

启动项目：npm run build

目录结构：package.json:项目依赖的核心包

src:源码目录，保留index.js（项目的入口文件，从这里开始运行）和App.js（项目的跟组件，

2、JSX

JavaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模板结构

优势：HTML的声明式模板语法，JS的可编程能力

本质是JS的语法扩展，浏览器本身不能识别，需要通过解析工具（BABEL)做解析之后才能在浏览器中运行

可以在线使用来查看它解析之后的内容

3、JSX中使用JS表达式

在JSX中可以通过大括号语法{}识别JavaScript中的表达式（注意：if语句，switch语句，变量声明属于语句，不是表达式，不能出现在{}中）

（1）使用引号传递字符串

（2）使用JavaScript传递变量，

（3）函数调用和方法调用

（4）使用JavaScript对象

4、JSX中实现列表渲染

通过原生的map方法（加上key:React框架内部使用，提升更新性能）

5、简单条件渲染

通过逻辑与&&运算符/三元表达式（？：）

6、复杂条件渲染

通过自定义函数+if判断语句

7、事件绑定

（1）简单语法：on+事件名称={事件处理程序}

（2）使用事件对象参数：在事件回调函数中设置形参e

(3)传递自定义参数：事件绑定的位置改成箭头函数的写法，在执行实际处理业务函数的时候传递实参

8、React中的组件

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

首字母大写的函数，内部存放了组件的逻辑和视图UI，

渲染：自闭和/成对标签

9、useState使用

（1）基础使用

是一个React Hook函数，返回值是一个数组（第一个参数是状态变量，第二个参数是set函数，用来修改状态变量），运行向组件添加一个状态变量，从而控制影响组件的渲染结果

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

（2）修改状态的规则

状态不可变：只能替换不能修改，直接修改状态不能引发视图更新

（3) 修改对象状态

传给set方法一个全新的对象

10、组件样式控制

（1）基础样式控制

1. 行内样式
2. class类名控制

补充：数据渲染层面，最直观的感受是：React使用{}，Vue使用{{}}

11、案例-评论

（1）列表渲染：

1）使用useState维护评论列表

2）使用map方法对列表数据进行便利渲染

（2）删除：

需求分析：

1）只有自己的评论（user->userid,item->userid)才显示删除按钮

2）点击删除按钮，删除当前评论，列表中不再显示

实现思路：

1）删除显示：条件渲染

2）删除功能：拿到当前id作为条件对数组进行filter过滤

(3)渲染tab点击高亮实现：

核心思路：点击谁就把谁的type(唯一的）记录下来，然后和遍历时每一项的type做匹配，对于匹配到的设置高亮类名

（4）排序功能：

1)点击最新，评论列表倒序排列(desc)

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

3)引入第三方库lodash->orderBy

进入官网，右上角文档，

先安装后使用：先引入，使用函数

12、Classnames优化类名控制

Classnames是一个JS库，可以通过条件动态控制class类名的显示

目前存在的问题：字符串拼接的方式不够直观，且容易出错

使用：先安装，后导入，再使用

13、受控表单绑定

概念：使用React组件的状态（useState)控制表单的状态

实现过程：state绑定到input的value属性，把input最新的value值设置给state

14、React中获取DOM元素

使用useRef钩子函数，

步骤：

（1）使用useRef创建ref对象，并与JSX绑定

（2）在DOM可用时，通过inputRef.current拿到DOM对象

14、案例-发表评论

需求分析：

（1）获取评论内容

（2）点击发布按钮发布评论

（3）id处理和时间处理

(4) 清空内容(input的value置为空）并重新聚焦（先拿到DOM元素调用focus方法)

1）rpid要求一个唯一的随机数id-uuid(官网先安装，后导入，然后调用方法）

2) ctime要求以当前时间为标准，生成固定格式-dayjs（先安装，后导入（显示->format)

15、组件通信

组件之间的数据传递

（1）父传子：父传：在子组件标签上绑定属性；子接：子组件通过props（对象，数组，数字，字符串，布尔值，函数，JSX）（只读对象）参数接收数据

（2）prop children

当内容嵌套在子组件中时，父组件会自动在名为children的prop属性中接收该内容

（3）子传父：在子组件中调用父组件的函数并传递参数

（4）使用状态提升实现兄弟组件通信

先传给父组件，再由父组件通过父传子传递给兄弟组件

（5）使用Context机制跨层级组件通信

不是直接的父子关系

实现步骤：

1. 使用createContext方法创建一个上下文对象Ctx
2. 在顶层组件（App)中通过Ctx。Provider组件提供数据
3. 在底层组件（B）通过useContext钩子函数获取数据

（6）useEffect

1）初识

是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的事件，比如发送AJAX请求，更改DOM等

有两个参数，第一个参数是个函数，可以叫做副作用函数，在函数内部可以放置要执行的操作

第二个参数是个数组（可选），放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕后执行一次(一般是一个空数组）

2）依赖项参数说明：

没有依赖项：组件初始渲染+组件更新执行

空数组依赖：只在初始渲染时执行一次

添加特定依赖项：组件初始渲染+特定依赖项变化时执行

3）清除副作用

由组件本身引起的对接组件外部的操作，比如开启了一个定时器，我们想要在组件卸载时把定时器也清理掉，这个过程就是清理副作用。时机：组件卸载时自动执行。

16、自定义Hook函数

1）自定义Hook是以use打头的函数，可以用来实现逻辑的封装（封装好之后要return出去）和复用。

存在的问题：布尔切换的逻辑，和当前组件耦合在一起，不方便复用

2）封装通用思路：

声明一个use打头的函数

在函数体内封装可复用的逻辑

把组件中用到的状态或者回调（以对象和数组方式）return出去

在使用该逻辑的地方解构并执行

3）ReactHooks使用规则

（1）只能在组件中或其它自定义Hook函数中调用

（2）只能在组件的顶层使用，不能嵌套在if,for,等其它函数中

17、案例-评论优化

1. 通过接口获取评论列表（useEffect)

使用json-server（快速以.json文件作为数据源模拟接口服务的工具）工具模拟接口服务，通过axios发送接口请求

引入方法：先安装，npm i json-server -D

src目录下新建db.json,把-db.json中的内容复制进来，在package.json中添加配置：scripts:"server":"json-server db.json --port 3004" 启动：npm run server

安装axios，

1. 自定义Hook函数封装数据请求
2. 封装评论项item组件

抽象原则：App组件作为”智能组件“负责数据的获取，item作为”UI组件“负责数据的渲染

好啦，以上就是本文的全部内容，下期间~