暑期带你不走偏快速学习React
2021-07-29 12:08:35 1 举报AI智能生成
前端进阶必备，暑期带你不走偏快速学习React
作者其他创作
大纲/内容
React基础
React介绍
React介绍
React 是由 Facebook 开源的一个JavaScript 库
官方解释: 用于构建用户界面的 JavaScript 库
React特点
声明式编程
组件化开发
多平台适配
React开发依赖
react: 包含 react 所必须的核心代码
react-dom: react渲染不同平台所需要的核心代码
babel: 将 jsx 转换成React代码工具
认识Babel
babel是什么
是前端使用非常广泛的编译器、转码器
可以将ES6代码转为ES5代码,从而在现有环境执行
React和Babel的关系
默认情况下 React 其实可以不用 babel
但前提是我们使用 React.createElement 来编写源代码
它编写的代码非常繁琐可读性差
babel可以帮助我们转换成React.createElement
引入React依赖
方式一：直接CDN引入
方式二：下载后，添加本地依赖
方式三：通过npm管理
React基础语法
认识JSX
分支主题
JSX是一种JavaScript的语法扩展, 也在很多地方称之为JavaScript XML
它用于描述我们的UI界面,并且其完成可以和JavaScript融合在一起使用
React为什么选择JSX
React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
比如UI需要绑定事件(button、a原生等等)
比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI
JSX的书写规范
JSX的顶层只能有一个根元素
我们通常在jsx的外层包裹一个小括号0,这样可以方便阅读
注意：如果是单标签，必须以/>结尾
JSX的使用
JSX中的注释
{ /* JSX中的注释 */ }
JSX中嵌入变量
情况一: 当变量是Number、 String、 Array 类型是, 可以直接显示
情况二: 当变量是null、undefined、Boolean类型时，内容为空
React绑定属性
绑定普通属性
分支主题
绑定class
分支主题
绑定style
分支主题
React事件绑定
React事件绑定
通过 {} 传入一个事件处理函数，这个函数会在事件发生时被执行
this的绑定问题
如果函数事件处理函数中打印this ,会发现是undefined
原因是 btnClick 函数并不是我们主动调用的
如何解决:
方案一: bind给btnClick显示绑定this
方案二: 使用 ES6 class fields 语法
方案三: 事件监听是传入箭头函数(推荐)
事件参数传递
情况一: 获取 event 对象
如果没有传递参数，默认参数是: event 事件参数对象
情况二: 获取 event对象 和 更多参数
有更多参数时，我们最好的方式就是传入一个箭头函数
主动调用事件函数，并且传入相关的其他参数
React条件渲染
React条件渲染
方式一：条件判断语法
适合逻辑多的情况
方式二：三元运算符
适合逻辑比较简单
逻辑与: 运算符&&
适合如果条件成立,渲染某一个组件
如果条件不成立,什么内容也不渲染
v-show的效果
主要是控制 display 属性是否为 none
React列表渲染
对数组进行展示: map 高阶函数
过滤掉一些内容: filter函数
截取数组中的一部分内容: slice函数
JSX的本质
JSX的本质
JSX仅仅只是 React.creteElement(component, pops, ...children) 函数的语法糖
所有的JSX代码最终被转换成React.create Element的函数调用
createElement需要传递三个参数:
参数一: type
参数二: config
参数三: children
Babel官网查看
React组件化开发
认识组件化
组件化思想
将复杂的组件进行拆解, 拆分成很多个可以完成的小组件
再将其放在整体当中，你会发现复杂的组件也会迎刃而解
React的组件化
组件化提供了一种抽象,让我们可以开发出一个个独立可复用的小组
React的组件相对于Vue更加的灵活和多样
React的组件化的分类
根据组件的定义方式
函数组件
类组件
组件内部是否有状态需要维护
无状态组件
有状态组件
根据组件的不同职责
展示型组件
容器组件
React 创建组件
类组件
类组件的定义由如下要求
组件的名称是大写字符开头
类组件需要继承自: React.Component
类组件必须实现render函数
使用class定义一个组件
constructor是可选的, 通常在 constructor 中初始化一些数据
this.state中维护的就是我们组件内部的数据
render()方法是class组件中唯一必须实现的方法
render函数的返回值
React元素
通常通过 JSX 创建
数组或fragments
使得render方法可以返回多个元素
Portals
可以渲染子节点到不同的DoM子树中
字符串或数值类型
他们在DOM中会被渲染为文本节点
布尔类型或null
什么都不渲染
函数组件
函数组件的特点
没有生命周期, 也会被更新并挂载, 但是没有生命周期函数
没有 this (组件实例)
没有内部状态 (state)
React 生命周期
创建时
constructor
render
componentDidMount
更新时
render
comcponentDidUpdate
卸载时
componentWillUnmount
React 父子组件通信
父传子
父组件通过 属性=值 传递子组件数据
子组件通过 props 属性获取父组件传递的数据
prop-type 属性验证
使用:
prop-type 库
作用:
prop-type 库进行 props 类型校验
子传父
父组件给子组件传递一个回调函数
在子组件调用这个函数
注意 this 绑定问题
React 非父子组件通信
Context
React.createContext
Conteext.Provider
Class.contextType
Context.Consumer
组件通信图示
分支主题
React 通信补充
React slot
Children 实现插槽功能
props 实现具名插槽
属性展开
展开运算符: ...
event
创建全局事件总线
创建全局事件总线
监听事件
卸载事件
refs
ref使用
方式一：传入字符串
方式二：传入一个对象
方式三：传入一个函数
ref类型
应用于HTML元素时, 获取的是DOM元素
应用于组件时, 获取的是组件对象
受控组件与非受控组件
受控组件
表单的输入由React的state进行维护, 成为"唯一数据源"
非受控组件
表单数据是步由 React 组件来管理的
高阶组件
高阶组件定义
首先,高阶组件本身不是一个组件,而是一个函数
其次,这个函数的参数是一个组件,返回值是一个组件
高阶组件应用场景
应用一: props的增强
应用二: 渲染判断鉴权
应用三: 生命周期劫持
HOC 的一些缺陷
HOC 也有自己的一些缺陷
如果大量使用HOC,将会产生非常多的嵌套,这让调试变得非常困难
ref的转发
在开发中想要获取函数式组件中某个元素的DOM
通过"forward"高阶组件
React其他特性
Portals
希望渲染的内容独立于父组件
Fragment
作用
渲染的内容不包裹一个根div根元素
短语法
<>
StrictMode
用来突出显示应用程序中潜在问题的工具
React中的样式和动画
CSS 概述
组件化天下的CSS
React中的CSS
React中的样式
内联样式
内联样式的优点
1. 内联样式, 样式之间不会有冲突
2. 可以动态获取当前state中的状态
内联样式的缺点
1.写法上都需要使用驼峰标识
2.某些样式没有提示
3.大量的样式,代码混乱
4.某些样式无法编写(比如伪类/伪元素)
普通的css
优点
按照平常的网页标准编写css
缺点
普通的css都属于全局的css，样式之间会相互影响
css modules
介绍
css modules并不是React特有的解决方案
所有使用了类似于`webpack`配置的环境下都可以使用的
使用
.css/.less/.scss等样式文件都修改成.module.css/.module. less/.module. scss
缺陷
引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的
不方便动态来修改某些样式，依然需要使用内联样式的方式
classnames
用于动态添加classnames的一个库
styled-components
优点
CSS-in-JS通过JavaScript来为CSS赋予一些能力
包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修 改状态等等
缺点
获取动态状态依然是一个不好处理的点
特性
props、attrs属性
styled高级特性
AntDesign
认识craco
作用
用来进行修改默认配置
配置路径别名
配置主题颜色等
使用步骤
第一步：安装craco
yarn add acraco/craco
第二步：修改package.json文件
第三步:在根目录下创建craco.config.js文件用于修改默认配置
React-Transition-Group
CSSTransition
开始状态
-appear
-enter
-exit
执行动画
-appear-active
enter-active
-exit-active
执行结束
-appear-done
-enter-done
-enter-done
SwitchTransition
switchTransition可以完成两个组件之间切换的炫酷动画
TransitionGroup
当我们有一组动画时
需要将这些CssTransition放入到一个TransitionGroup中来完成动画
React-Transition-Group
CSSTransition
CSSTransition组件常见属性
CSSTransition组件常见的钩子函数
SwitchTransition
TransitionGroup
Redux
认识纯函数
JavaScript纯函数
纯函数指的是, 每次给相同的参数, 一定返回相同的结果
函数在执行过程中, 不能产生副作用
React中的纯函数
简单总结
在写的时候保证了函数的纯度，实现自己的业务逻辑即可
不需要关心传入的内容或者函数体依赖了外部的变量
你在用的时候，你确定你的输入内容不会被任意篡改
并且自己确定的输入，一定会有确定的输出
React非常灵活但它也有一个严格的规则
所有React组件都必须像"纯函数"一样保护它们的"props"不被更改
认识Redux
为什么需要redux
Javascript需要管理的状态越来越多,越来越复杂了
这些状态包括服务器返回的数据,也包括一些UI的状态
Redux的核心理念-Store
Redux的核心理念-action
Rdux的核心理念-reducer
Reedux的三大原则
单一数据源
State使只读的
使用纯函数来执行修改
Rdux的基本使用
Redux中核心的API
1. 创建`sotore`, 决定 store 要保存什么状态
2. 创建`action`, 用户在程序中实现什么操作
3. 创建`reducer`, reducer 接收 action 并返回更新的状态
Redux使用流程
分支主题
React-Redux的使用
自定义connect函数
react-redux
Redux-Middleware中间件
组件中异步操作
分支主题
redux中异步操作
分支主题
理解中间件
中间件的目的是在 dispatch 的 action 和最终到达的 reducer 之间, 扩展一些自己的代码
比如调用异步接口、添加代码调试功能等
redux-thunk
redux-sage
generator
redux-sage流程
分支主题
immutableJs
数据可变形问题
认识mmutablels
mmutableJS常见API
结合Redux管理数据
Router
前端路由规则
URL的hash
本质上是改变window. location的href属性
可以直接赋值location. hash改变href,但是页面不发生刷新
HTML5的history
history接口是HTML5新增的
它有六种模式改变URL而不刷新页面
react-router
BrowserRouter
history模式
link组件
NavLink组件
HashRouter
hash模式
Link组件
NavLink组件
Route
作用
Router用于路径的匹配
属性
path：用户设置匹配到的路径
component：匹配到的路径，渲染的组件
exat：精准匹配
NavLink
作用
路径被选中时，对应的a元素添加class
属性
activeStyle
活跃时(匹配)的样式
activeClassName
活跃时添加地class
axact
精准匹配
Switch
使用场景
只要有一个path匹配上了对应的组件, 后续就不会进行匹配了
使用
使用 Switch 包裹所有 Route 组件
Redirect
作用
Redirect用于路由的重定向
当这个组件出现后,就会执行跳转对应的to路径中
属性
to="/login"
react-router其他补充
路由嵌套
withRouter(手动路由跳转)
reacat-router-config
作用
·将所有的路由配置放到一个地方进行集中管理
安装
yarn add react-router-config
配置路由映射关系数组
嵌套子路由配置映射关系
在路由嵌套中配置路由映射关系
Hooks
认识Hook
Hook介绍
Hook是 React 16.8 的新增特性
它可以让我们不编写 class 的情况使用 state 以及其他的 React 特性
class和function对比
class组件
可以定义自己的state, 保存组件内部状态
class组件有对应的声明周期
class组件可以在状态改变时只会重新执行render函数
function组件
函数组件不能保存内部state, 因为每次调用都会产生新的变量
在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求
函数式组件在重新渲染时，整个函数都会被执行
State Hook
useStatet
参数
初始化值, 如果不设置为 undefined
返回值
元素一: 当前状态的值
元素二: 设置状态的函数
Hook补充
使用Hook的两个额外规则
只能在函数最外层调用Hook
只能在 React 的函数值组件中间调用Hook
useState补充
usestate函数的参数是可以传递一个函数的
setState 函数的参数也是可以传递一个函数的
Effect Hook
Effect Hook
功能
Effect Hook可以让你来完成一些类似于class中生命周期的功能
作用
通过useEffect的Hook,可以告诉React需要在渲染后执行某些操作
参数
useEffect要求传递一个回调函数, 在React执行完更新DOM操作之后, 就会回调这个函数
执行时机
首次渲染之后, 或者每次更新状态之后, 都会执行这个回调函数
需要清除Effect
功能
Effect Hook通过什么方式来模拟componentwillUnmount呢？
使用
useEffect传递的回调函数A本身可以有一个返回值
这个返回值是另一个回调函数B
这个回调函数B会在组件卸载的时候执行清除操作
使用多个Effect
目的
解决class中生命周期经常将很多的逻辑放在一起的问题
使用Effect Hook , 我们可以将它们分离到不同的useEffect中
Effect性能优化
问题
useEffect的回调函数会在每次渲染时都重新执行
但是某些代码我们只是希望执行一次即可
解决
useEffect的参数二: 传递依赖数组
如果不希望依赖任何内容时, 可以传入一个空数组
这时这两个回调只会在DOM渲染后执行和组件被卸载之前执行
useContext
useReducer
介绍
useReducer仅仅是usestate的一种替代方案
使用场景
在某些场景下, 如果state的处理逻辑比较复杂
我们可以通过useReducer来对其进行拆分
或者这次修改的state需要依赖之前的state时,也可以使用
注意事项
数据是不会共享的
它们只是使用了相同的counterReducer的函数而已
useCallback
解决的问题
当依赖的属性没有改变时
不希望更新render时, 重新定义事件函数
使用场景
在将一个组件中的函数,传递给子元素回调函数使用时,使用usecallback对函数进行处理
useMemo
使用场景
在将一个组件中的函数, 传递给子元素局部变量使用时, 使用useMemo对函数进行处理
useRef
使用场景
引入DOM (或者组件,需要是class 组件)元素
保存一个数据,这个对象在整个生命周期可以保存不变
使用ref保存上一次的某一个值
useImperativeHandle
作用
减少暴露给父组件获取的DOM元素属性, 只暴露给父组件需要用到的DOM方法
参数1
父组件传递的ref属性
参数2
返回一个对象, 以供给父组件中通过ref.current调用该对象中的方法
useLayoutEffect
场景
如果我们希望在执行某些操作之后再DOM
那么这个操作应该放到useLayoutEffect
注意会阻塞页面渲染
自定义Hook
本质
函数代码逻辑的抽取
如何自定义
自定义Hook是一个函数,其名称以"use"开头
函数内部可以调用其他的Hook
自定义Hook场景
需求一: Context共享
需求二: 获取鼠标滚动位置
需求三: localStorage数据存储
Redux Hook
useDispatch
useSelector
useselector性能优化
0 条评论
下一页
