React框架(一)

一、React开发环境创建

1、使用create-react-app快速搭建开发环境

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

运行：npm (run) start

打包：npm run build

2、JSX基础

1、JSX的概念

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

优势：1、HTML声明式模版写法  2、JS的可编程能力

2、JSX的本质

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

左边是JSX代码，右边是解析完在浏览器运行的JS代码

3、高频场景

JSX中使用JS表达式

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

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

4、JSX中实现列表渲染

语法：在JSX中可以使用原生JS中的map方法遍历渲染列表

5、JSX实现条件渲染

6、JSX实现复杂条件渲染

需求：列表中需要根据文章状态适配三种情况，单图、三图和无图模式三种模式

解决方案：自定义函数 + if判断语句

二、1.React基础事件绑定

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

2、使用事件对象参数

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

3、传递自定义参数

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

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

4、同时传递事件对象和自定义参数

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

三、React组件

1、组件是什么

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

2、React组件

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签来写即可

3、useState基础使用

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

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

4、useState修改状态的规则

状态不可变

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

5、修改对象状态

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

6、组件的样式处理

组件基础样式方案

1、行内样式（不推荐）

2、class类名控制

7、受控表单绑定

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

8、React中获取DOM

在React组件中获取/操作DOM，需要使用useRef钩子函数，分为两步：

四、组件通信

1、理解组件通信

概念：组件通信就是组件之间的数据传输，根据组件嵌套关系的不同，有不同的通信方法

2、父传子

实现步骤：

1、父组件传递数据-在子组件标签上绑定属性

2、子组件接收数据-子组件通过props参数接收数据

3、子传父

4、使用Context机制跨层级组件通信

五、useEffect

1、useEffect概念理解

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

说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于“只由渲染引起的操作”

2、useEffect的基础使用

需求：在组件渲染完毕之后，立刻从服务端获取频道列表数据并显示到页面中

3、useEffect参数依赖项说明

1、不管是name还是count，只要组件重新渲染就会不断执行

2、count会变，不会打印

3、只会由count更新而重新执行

4、useEffect-清除副作用

说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行

需求：在Son组件渲染时开启一个定时器，卸载时清除这个定时器

5、自定义hook的实现

概念：自定义hook是以use打头的函数，通过自定义Hook函数可以用来实现函数的封装和复用

6、ReactHook使用规则

使用规则：

1、只能在组件或者其他自定义函数中调用

2、只能在组件的顶部调用，不能嵌套在if,for,其他函数中

六、Redux

1、什么是Redux

Redux是React最常见用的集中状态管理工具，类似Vue中的Pinia（Vuex），可以独立于框架运行

作用：通过集中管理的方式管理应用的状态

2、Redux管理数据流程梳理

3、React与Redux—环境准备

配套工具

配置基础环境

4、store目录结构设计

5、实现counter

整理路径熟悉

为React注入store

react-redux负责把Redux和React链接起来，内置Provider组件，通过store参数把创建好的store实例注入到应用中，链接正式建立

React组件使用store中数据

在React组件使用store中数据，需要用到一个钩子函数 -useSelector，它的作用是把store中的数据映射到组件中

React组件修改store中的数据

React组件中修改store中的数据需要借助另外一个hook函数-useDispatch,它的作用是生成提交action对象的dispatch函数

6、提交action传参

提交action传参实现需求

7、异步状态操作

七、ReactRouter

1、创建路由开发环境

2、实际开发的Router环境

3、什么是路由导航

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信

声明式导航

4、编程式导航

命令式导航

5、路由导航传参

6、嵌套路由配置

什么是嵌套路由

在一级路由中又嵌套了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由

嵌套路由配置

默认二级路由

场景和配置方式

404路由

场景：当浏览器输入url的路径在整个路由配置都中找不到对应的path,为了用户体验，可以使用404兜底组件进行渲染。

两种路由模式

八、配置项目

1、使用CRA创建项目

2、安装SASS

3、安装Ant Design组件库

4、配置基础路由Router

5、配置@别名路径