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