【 React 】重点知识总结 && 快速上手指南

react 是 facebook 出的一款针对视图层的库。react 使用的是单向数据流的机制

React 官方中文文档

基础 api 和语法

jsx 语法

就是在 js 中插入 html 片段 在 React 中所有的组件都是 function

组件定义

• function 定义组件

  就是使用 function 定义组件

  任何一个 function 定义的组件需要使用大写命名，返回一个 dom 结构表示当前组件展示的内容

  在 react16.8 之后推荐使用 function 定义组件，结合 hooks 中的 api 做 react 项目开发

• class 定义组件【后期在详细的讲】

  需要继承自 React.Component,这种定义的组件需要有一个 render 方法，这个方法返回一个 dom 结构

常见的 hooks

​ 当组件的属性或者数据改变的时候组件会重新刷新(就是组件的 function 会重新被执行)

• useState **

  可以在 function 定义的组件中定义局部状态数据，当数据改变的时候组件会重新渲染

  返回一个数组，数组的第一项是一个变量名，第二项是改变数据的方法。需要注意的是参数二

  改变数据的方法有两种使用方式：

  1. 直接是一个值
  2. 可以设置一个 function，function 中默认传递一个 state 状态数据的上一次的值，function 的返回值会作为 state 数据的最新值。建议使用这种方式改变 state 数据

• useEffect **

  可以在 function 定义的组件中模拟组件的生命周期钩子函数

  参数一 是一个回调函数

  参数一 可以返回一个function，这个返回的方法在组件销毁的时候执行

  参数二 是一个依赖数组。分为三种形式

  1. 参数二不存在，那么每一次组件更新都会执行回调函数
  2. 参数二为空数组，那么只有在初始化的时候执行一次
  3. 参数二中的数组存在数据，那么数组中的每一项改变的时候都会执行回调函数

• useMemo

  作用是缓存一个值，它接收两个参数，参数一是一个被缓存的值，参数二是一个依赖项

• useCallback

  作用是缓存一个 function，它接收两个参数，参数一是一个回调函数，参数二是一个依赖项，当参数二中的依赖数组不发生改变的时候，function 不会重新被定义

• useReducer

  作用的作用是做一个数据管理，它是基于单向数据流的。

  useReducer 可以理解为简化版的 redux

  接收两个参数：参数一是一个 function，参数二是一个初始值

  返回一个数组：第一项为 state 数据，第二项为 dispatch 方法

  如果要改变数据只能通过 dispatch 派发一个 action 实现

• useContext

  作用是实现跨组件之间传参

• memo

  memo 是一个 function，接收一个组件作为参数，返回一个新的组件。作用是对组件做缓存，当组件接收到的属性不发生改变的时候组件不会重新渲染

  memo 这个 API 在开发的时候建议使用，便于组件性能优化

• useRef

  作用是获取 react 组件中的 dom 元素

组件传参

• 父传子

  属性 children 属性相当于元素里面的子节点（有点插槽的意思）

• 子传父

  方法调用

• 非相关组件

  context 上下文或者 redux

class 定义组件

class 定义的组件需要一个 render 方法，这个方法返回一个当前组件展示的 dom 数据，这个方法再每一次数据或者属性改变的时候会重新执行

class 定义的组件内可以设置局部状态，通过 state 进行

改变数据，通过方法 setState，setState 是异步的，可以接收两个参数，参数一 表示改变之后的新数据；参数二 表示数据改变之后的回调函数。可以再回调函数中获取改变之后的最新数据

组件的 this 指向问题

在 class 定义的组件中，我们需要为 function 绑定 this。常见的有三种写法：

1. 使用箭头函数
2. 在 render 函数中，赋值的时候绑定
3. 在 constructor 初始化的时候绑定，建议使用这种

因为在 render 的时候，当前上下问的 this 是当前组件，但是执行事件响应的时候 this 已经不存在了，所以需要为 class 定义的组件绑定一下 this

组件生命周期

1. 初始化阶段

   constructor(初始化的时候执行设置属性和状态数据)

2. 挂载阶段

   componentWillmount(挂载之前执行)

   【重要】componentDidMount(挂载完成之后执行)：在这个生命周期钩子函数中执行数据获取操作，调接口取数据

3. 更新阶段

   componentWillReceiveProps(接收到新的属性时执行)

   【重要】shouldComponentUpdate(判断组件是否需要更新)：这个方法接收两个参数(新的属性和新的状态)，返回一个 bool 值。这个方法常常用在组件性能优化的时候使用

   componentWillUpdate(组件将要更新)

   componentDIdUpdate(组件更新完成)

4. 销毁阶段

   componentWillUnmount(组件销毁的时候执行)

---

react 中 class 定义组件的生命周期钩子函数在 16.3 之后发生了一些改变，新增了几个，删除了三个(带有 will 的生命周期钩子函数,分别是：componentWillMount、componentWillReceiveProps、componentWillUpdate)

---

class 组件生命周期和 useEffect 关系:

class 定义组件的生命周期钩子函数和 function 定义组件的 useEffect 是相互对应的

useEffect 的参数二为空数组的时候，对应 componentDidMount

useEffect 的参数二为数组并且数组中存在值得话，对应 componentDidUpdate

useEffect 得参数一中有返回值并且返回值是一个 function，那么这个回调函数对应 componentWillUnmount 组件销毁的时候执行

**嵌套组件生命周期:**会执行父组件的将要挂载和 render 方法，当执行 render 的时候开始解析所有的子组件。当子组件都挂载完成之后会执行父组件的挂载完成。

组件传参

• 父传子使用 props
• 子传父使用方法调用
• 非相关组件使用 context 上下文或者 redux

PureComponent

在组件定义的时候建议继承这个类，它的作用类似于 function 定义组件中的 memo，可以对组件做性能优化。当组件接收到的属性发生改变的话，组件不会重新渲染。建议组件定义的时候使用它

脚手架搭建项目

npx create-react-app first-react-app-pre # 使用cra关键脚手架搭建一个react项目
cd first-react-app-pre
npm start

https://react.docschina.org/docs/create-a-new-react-app.html

react 脚手架搭建的项目中，默认会生成测试文件，测试文件使用的是 facebook 的官方测试框架 JEST(了解就行)

---

vite 搭建 react 项目，vite 创建项目会更快而且更小

https://cn.vitejs.dev/

npm init vite@latest # 根据提示创建项目
# 如果需要使用sass，直接安装就好
npm i sass -D

路由插件

React Router: Declarative Routing for React.js 路由 5.0 的官网文档

# 安装
npm i react-router-dom@5 # 安装路由5的版本

常用的组件

• HashRouter/BrowserRouter

  表示路由的模式，这个组件必须放在做外层，所有的路由组件都需要放在这个组件内

• Switch

• Route

  path url 中访问的地址

  component 对应地址展示的组件

  展示组件的时候有三种写法：

  1. component 属性

     这种方式可以把路由的属性信息直接映射到组件的属性上

  2. render 方法

     没有传递数据

  3. 子节点【建议使用这种】

     没有传递数据

• Link/NavLink

  生成 a 标签或者跳转链接

  NavLink 相对于 Link 来讲，会多一个选中的样式名

  需要一个必填属性 to，表示跳转到哪里去。to 有两种写法：

  1. 字符串

  2. 对象

     pathname 表示 url 地址

     search 表示 search 中传递的参数，参数在?后面，刷新之后参数还在。

     state 表示 state 中传递的参数，刷新之后参数丢失

  NavLink 中的 isActive 属性可以接收一个 function 作为参数，返回一个 bool 值，用来设置当前标签是否选中

• Redirect

• withRouter

  是一个高阶组件(HOC)，作用就是接收一个组件作为参数，为组件添加路由的属性信息进行返回

  常见的高阶组件有:withRouter 和 connect

• useLocation

  获取 location 信息，只能在 function 定义的组件中使用

• useHistory

  获取 history 数据，只能在 function 定义的组件中使用

TailwindCss

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

vite 创建的项目中使用 Installing Tailwind CSS with Vite - Tailwind CSS

npm install -D tailwindcss postcss autoprefixer # 安装插件
npx tailwindcss init -p

antd 组件库

是一个 react 中的 ui 组件库，一定要会用。目前它的版本是 4.x 的，和以前 3.x 的版本写法有很大差异。4.x 之后建议使用 function 定义组件

https://ant-design.gitee.io/index-cn

redux

redux 是 react 中的状态管理插件，使用的是单向数据流的机制进行数据管理。redux 提供一个全局状态树，所有的数据都存储在上面。

单向数据流：数据是单向流动的，我们在 view 视图中通过 dispatch 派发一个 action 改变 state 数据，数据改变之后 view 视图重新渲染

redux 中的数据流向: 在组件中 dispatch 派发一个 action，reducer 会监听到这个 action，所有的数据改变都在 reducer 中进行，根据 action 的 type 不一样，进行数据改变。

action 中的 type 不能重复，因为每一次派发 action 的时候所有的 reducer 都会接收到。如果 type 重复了，那么会引起不必要的数据改变。为了解决这个问题可以为 type 添加命名空间(比如 xx/xx 的形式)或者使用 symbol 这种数据类型进行定义。

使用

redux 官网

redux 中文网

• redux

  是 redux 库的核心插件，主要是做数据流管理

• react-redux

  它的作用是实现 redux 数据和 react 组件之间的关联

  npx create-react-app redux-pre-app

  or

  npm init vite@latest

  cd xx
  npm i redux react-redux # 安装插件

redux 数据流向

在页面中通过dispatch派发一个action，reducer中接收到action之后改变数据。数据改变之后页面重新更新

---

redux 中的 action 必须是一个 plain object(简单的对象)，不能是一个 function。为了解决异步 action 的问题，我们需要使用插件redux-thunk

redux-thunk 插件的作用是判断当前我们 dispatch 的 action 是什么类型，如果是一个对象那么直接执行；如果是一个 function，那么会把 dispatch 当参数传递的 function 的内部进行派发

npm i redux-thunk # 安装插件

redux toolkit

redux-toolkit

是官方提供的一个 redux 的插件集，可以让我们非常方便的在项目中使用 redux 做开发，无需再做额外的配置。它内置了一些常用的插件，比如：dev-tools(开发者调试工具),redux-thunk(处理异步操作),immutable(不可变数据类型)等。

npm install @reduxjs/toolkit react-redux # 安装依赖

• createSlice

  这个 API 的作用是创建每一个 reducer 数据，通过指定 name、initialState、reducers 和 extraReducers 进行组织

  • name 表示命名空间
  • initialState 表示初始值
  • reducers 定义的改变数据的方式，可以直接导出为 actions
  • extraReducers 监听其他的 reducer，非当前 slice 中同步改变数据的操作

• configStore

  作用是配置或者创建一个 store 数据源

• createAsyncThunk

  作用是创建一个异步的 action，创建成功之后会具有三个状态

  • pending，进行中
  • rejected，失败
  • fulfilled，成功。它接收两个参数，参数一为当前的 state 数据、参数二为 action

yarn

是 facebook 出的一款包管理工具，和 npm 的功能是一样的。你可以二选一，一个项目只能使用一款工具。

Home page | Yarn

npm i yarn -g # 安装yarn
yarn add xx # 安装一个模块
yarn remove xx # 删除一个模块

umi

蚂蚁金服的企业级开发框架，可以实现零配置的方式让我们做一个 react 项目。内置封装了常用的一些插件，直接使用就好。这个框架内置了路由插件，只需要按照标准的目录结构创建文件就会自动生成路由。

UmiJS - 插件化的企业级前端应用框架

# 创建一个空白文件夹，初始化一个node项目
npm init -y # 创建一个package.json文件
npm i umi # 安装umi插件
# 修改package.json文件，添加启动命令
# 在scripts节点中添加
# "dev": "umi dev"
# 以后就可以直接运行 npm run dev 启动项目

umi 中的路由可以使用配置文件进行设置或者直接使用约定式路由，两者二选一。如果设置了配置式路由，那么约定式路由就不再生效

使用 umi ui 启动或者创建项目

npm i @umijs/preset-ui -D # 安装插件
# 以下命令需要在linux终端运行
npx umi dev # 启动之后再3000端口可以直接访问umi ui的界面

DVA

是一个 redux 得封装，可以让我们实现零配置得方式在项目中使用 redux 这个状态管理插件。

토토 마스터코리아 -- https://dvajs.com/

npm i @umijs/preset-react # 安装插件
# https://umijs.org/zh-CN/plugins/plugin-dva

GitHub - btc022003/honey-home 我提供的接口源代码的地址在这里，需要你们使用的时候更新一下

antd pro

Next.js

react 的服务器端渲染框架