为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第二十二天 React的行内样式与CSS

课程:React18 系统精讲 章节:Redux-toolkit 讲师:阿莱克斯刘 课程内容 Sample 先来大概梳理一下 RTK thunk的流程,先看一看文档的案例。整个thunk流程可以分为三个部分,分别是创建、分发、以及处理 创建需要使用createAsyncThunk函数,例子中创建了以名叫fetchUserById的thunk action。 接着就是分发、dispatch 这个action,请看最后一行代码。dispatch的逻辑与原生redux逻辑完全一样,fetchUserById可以被看为一个action creator,在dispatch 的时候通过参数来传递action pa

236浏览
0推荐
0评论

【九月打卡】第二十一天【redux-toolkit】

课程:React18 系统精讲 章节:Redux-toolkit 讲师:阿莱克斯刘 课程内容 【redux-toolkit】createSlice、reducer、与immer 上节课,我们学习了redux-toolkit的基本原理,讲解了几个比较关键的api。这些课,我们来给项目添加redux-toolkit框架,然后把产品详情页面从mvc改变为redux。 如何从mvc改变为redux的基本思路我们在第七、第八章的时候详细讲解过,所以,接下来我们不会再深入探讨原理,所有代码操作都会集中于如何使用redux-toolkit来进行的。因为redux和react-redux是本章基础,

194浏览
0推荐
0评论

【九月打卡】第二十天

课程:React18 系统精讲 章节:Redux-toolkit 讲师:阿莱克斯刘 课程内容 【详情页面搭建 1】页面框架、详情与日期选择 本节课,我们来使用最简单的mvc架构搭建产品的详情页面。先简单介绍一下产品详情页面的ui,整个页面分为三个大块,分别是网站的header顶部导航栏,中间部分的页面内容,以及最底部的网站footer。 顶部导航和底部导航可以复用已有的组件,所以我们的关注点是页面的内容。从内容结构的角度来说,我们可以把内容分为产品简介、产品特色、产品费用、预订须知、以及用户评

113浏览
0推荐
0评论

【九月打卡】第十九天 Redux-toolkit

课程:React18 系统精讲 章节:Redux-toolkit 讲师:阿莱克斯刘 课程内容 【概念理解】什么是redux-toolkit 关于redux-toolkit,我们在本章开始的时候做了一点点基本的介绍,本节课,我们来深入剖析一下。 在深入研究源码之前,请同学们先打开redux-toolkit的官网 https://redux-toolkit.js.org/,我们先来简单了解一下什么是redux-toolkit,接下来的课程我都会使用redux-toolkit的简称RTK。 首先,我们看到在主页的副标题红,明确的写着这是official的、opinionated的、batteries的、

191浏览
0推荐
0评论

【九月打卡】第十八天 Redux

课程:React18 系统精讲 章节:Redux中间件 讲师:阿莱克斯刘 课程内容 【中间件】什么是中间件 上节课,我们学习了redux-thunk,初步了解了redux中间件的的作用。本节课,我们来学习一下中间件的原理。 函数式编程概念 在学习中间件之前,我们还是得先补充一点关于函数式编程的基础知识。不过如果同学们已经自学成才了,那么可以跳过这部分的内容。 复合函数 所谓函数式编程,其实就是在做数学题,比如复合函数。学过高中数学我们都知道函数是可以组合的,对吧。 比如说,我们现在有

131浏览
0推荐
0评论

【九月打卡】第十七天 redux

课程:React18 系统精讲 章节:Redux中间件 讲师:阿莱克斯刘 课程内容 【中间件】使用redux-thunk中间价实现异步action 上节课,我们综合运用了前一章整章的知识,完成了home页面的redux架构。但是还有一个小问题值得我们关注,请同学们打开homepage文件。在componentDidMount函数中,我们在初始化推荐列表数据的时候调用了一个api请求. 我们可以这样思考一下刚刚提到的几个问题。现在,推荐列表的数据是在主页启动的时候通过调用api来获得数据的,api是由主页触发的。那么我们可以想象

99浏览
0推荐
0评论

【九月打卡】第十六天 Redux

课程:React18 系统精讲 章节:Redux 讲师:阿莱克斯刘 课程内容 第一个任务,我们需要为store创建与home页面相对应的状态state,推荐产品列表数据 第二个任务,在新建推荐产品列表state的时候,我们也要准备好相应的reducer 第三个任务,需要为 获取 api 数据 创建 action。 第四个任务,在主页中连接store,并且分发action 这节课的的四个任务看似简单,但实际上相当于是整个第七章的综合,请同学们一定要注意跟紧课程节奏。 任务一与任务二 其实第一个任务和第二个任务是互相

134浏览
0推荐
0评论

【九月打卡】第十五天 Redux

课程:React18 系统精讲 章节:Redux 讲师:阿莱克斯刘 课程内容 1. hook版,引入了hooks来完成store的订阅与action的分发 2. useSelector订阅数据 3. useDispatch分发数据 how? 1. 创建文件夹 a. 在src文件夹下,新建redux文件夹 b. 在redux文件夹下,创建store.ts文件 c. 在redux文件夹下,创建xxx模块文件夹 d. 在xxx文件夹下,创建xxxActions.ts文件 e. 在xxx文件夹下,创建xxxReducer.ts文件 2. 创建store a. 创建store i. 在store.js中,通过createStore(

120浏览
0推荐
0评论

【九月打卡】第十四天 进击的Redux

课程:React18 系统精讲 章节:Redux 讲师:阿莱克斯刘 课程内容 Resrful是什么 • restful是rest的形容词 • REST全称是Representational State Transfer,中文意思是:表述(表征)性状态转移 • 是一种API设计架构、原则。 • 通过这个原则,我们统一约定了http的url、请求方式、和响应格式: § URL面向资源:每一条路由都是一个资源(页面),因而只会出现名词,不会出现动词。 § method请求方式:GET(获取)、POST(提交、添加)、PUT(更新)、DELETE(删除)、PATC

101浏览
0推荐
0评论

【九月打卡】第十三天 ReduxHooks版

课程:React18 系统精讲 章节:Redux 讲师:阿莱克斯刘 课程内容: 1. hook版,引入了hooks来完成store的订阅与action的分发 2. useSelector订阅数据 3. useDispatch分发数据 how? 1. 创建文件夹 a. 在src文件夹下,新建redux文件夹 b. 在redux文件夹下,创建store.ts文件 c. 在redux文件夹下,创建xxx模块文件夹 d. 在xxx文件夹下,创建xxxActions.ts文件 e. 在xxx文件夹下,创建xxxReducer.ts文件 2. 创建store a. 创建store i. 在store.js中,通过createStore

137浏览
0推荐
0评论

【九月打卡】第十二天 Redux——TypeScript版

课程:React18 系统精讲 章节:Redux 讲师:阿莱克斯刘 课程内容: 1. 基础版的重构版进行了文件架构改造,便于维护管理——action creater工厂模式 2. 同时加入了TypeScript(定义action类型) how? 1. 创建文件夹 a. 在src文件夹下,新建redux文件夹 b. 在redux文件夹下,创建store.ts文件 c. 在redux文件夹下,创建xxx模块文件夹 d. 在xxx文件夹下,创建xxxActions.ts文件 e. 在xxx文件夹下,创建xxxReducer.ts文件 2. 创建store a. 创建store i. 在store.js中

101浏览
0推荐
0评论

【九月打卡】第十一天 redux的使用

课程:React18 系统精讲 章节:redux 讲师:阿莱克斯刘 课程内容: 一、创建store a. 创建store i. 在src文件夹下,新建redux文件夹 ii. 在redux文件夹下,创建store.js文件 iii. xx b. 创建reducer i. 在src文件夹下,新建reducer.ts文件 ii. 将reducer方法写成匿名方法,导出。(这个匿名方法就是reducer) iii. 方法接收两个参数,第一个是传入的旧数据,第二个是更新数据的方式 iv. 最后return 处理后的新数据,这里没有逻辑,就直接return旧数据 v. reducer方法

82浏览
0推荐
0评论

【九月打卡】第十天 redux

课程:React18 系统精讲 章节:redux 讲师:阿莱克斯刘 课程内容: 一、创建store a. 创建store i. 在src文件夹下,新建redux文件夹 ii. 在redux文件夹下,创建store.js文件 b. 创建reducer i. 在src文件夹下,新建reducer.ts文件 ii. 将reducer方法写成匿名方法,导出。(这个匿名方法就是reducer) iii. 方法接收两个参数,第一个是传入的旧数据,第二个是更新数据的方式 iv. 最后return 处理后的新数据,这里没有逻辑,就直接return旧数据 v. reducer方法,通过actio

80浏览
0推荐
0评论

【九月打卡】第九天 【Redux 入门】实战项目架构设计

课程:React18...

80浏览
0推荐
0评论

【九月打卡】第八天

课程:React18 系统精讲 章节:路由系统 讲师:阿莱克斯刘 课程内容: 如何从React Router V5 升级到 V6 1. 升级 react-router 包 npm install react-router-dom@[VERSION_NUMBER] 替换VERSION_NUMBER为我们要安装的版本,或者如果我们想要最新版本,则替换为“ latest ”, 如下所示: npm install react-router-dom@6 或者 npm install react-router-dom@latest 2. 使用 Routes 替换 Switch 在 React Router v5...

75浏览
0推荐
0评论

【九月打卡】第七天 SPA路由工作流程

课程:React18 系统精讲 章节:hooks 讲师:阿莱克斯刘 课程内容: 1. 什么是SPA a. PSA即单页面应用,在服务器中是一个文件夹,包含了项目所有文件(HTML、CSS、JavaScript) b. JavaScript劫持浏览器路由,生成虚拟路由来渲染页面 c. 符合亲后端分离的趋势,服务器不再负责UI输出,专注于数据支持 d. 同时支持桌面App、手机App、网站App 2. 什么是路由 a. 当浏览器的URL发送变化时,浏览器的页面也会发生变化 b. 这个连接URL与页面变化的就是路由 3. 在前后端分离的项目

104浏览
0推荐
0评论

【九月打卡】第六天 高阶组件

课程:React18 系统精讲 章节:hooks 讲师:阿莱克斯刘 课程内容: 一、what? • 高阶组件(HOC)是React中一种复用组件逻辑的设计模式 • 高阶组件是,参数为组件,返回值为新组件的函数 • 组件是将props转为UI,而高阶组件是将组件转为另一个组件 • 封装复用逻辑 二、why? a. 抽取重复代码,实现组件复用 b. 条件渲染,控制组件的渲染逻辑(渲染劫持) c. 捕获/劫持被处理组件的生命周期 三、how? a. hoc函数名以小写“with”开头 b. 定义一个HOC箭头函数,并导

116浏览
0推荐
0评论

【九月打卡】第五天 项目规划

课程:React18...

41浏览
0推荐
0评论

【九月打卡】第四天 context

课程:React18 系统精讲章节:hooks讲师:阿莱克斯刘课程内容:今天,我学习了react的上下文对象,Context。先提个问题,在react项目中,我们如何传递变量?打开 index.tsx 文件, 如果我们有个变量叫 username = “阿莱克斯“。一般来说,我们会通过使用props属性来传递变量,所以这时候我们可以给app组件创建一个username 的属性,然后把变量username传递给这个username prop。打开app组件,给组件的Props interface 补充username的类型interface Props { username: string}然后在组件声明中补充范型,const...

80浏览
0推荐
0评论

【九月打卡】第三天useEffect

课程:React18 系统精讲 章节:hooks 讲师:阿莱克斯刘 课程内容: 什么是纯函数? • 给一个函数输入同一个参数,一定输出同样的值。 • 在React中,给组件输入相同的props,就应该渲染一样的UI。 什么是副作用?(我们需要的是其处理副作用的能力) • 副作用与纯函数相反,即函数会处理与返回值无关的事情。 • 比如调用API接口获取数据,传同样的参数,在不同时间点调用接口,拿到的数据可能不一样。 • 输入参数一样,输出结果未必一样的情况,就是副作用。 官方解释也是

104浏览
0推荐
0评论
首页上一页12下一页尾页
意见反馈 帮助中心 APP下载
官方微信