![[紫薇别走]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_87.f741137.png)
![[嘿哈]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
![[强]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
流程![[坏笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_41.2751fc1.png)
待续......![[石化]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_73.55516c0.png)
橙晨成
获得徽章 0
- #每天一个知识点# 打卡第十二天
![[紫薇别走]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_87.f741137.png)
在前端开发中，使用Taro + React + TypeScript进行小程序开发并实现图片上传可以按照以下步骤进行：创建图片上传组件：进入项目目录，并在src目录下创建一个新的组件，例如ImageUploader.tsx。这个组件将负责处理图片上传的逻辑。
在ImageUploader组件中引入需要的依赖库：根据具体需求，你可能需要引入一些相关的依赖库，如Taro UI、Axios等。可以使用npm或者yarn进行安装，并在组件中引入。
实现图片上传逻辑：在ImageUploader组件中，你可以通过Taro提供的API来实现图片上传的功能。例如，可以使用Taro.uploadFile来上传图片文件到服务器。在该函数中，你需要指定上传的URL、文件路径、文件名等参数，并处理上传成功或失败的回调函数。
在页面中使用ImageUploader组件：在你的页面组件中，可以引入并使用刚刚创建的ImageUploader组件。可以根据需要传递一些配置参数，如上传的URL、限制的文件类型等。展开评论1 - 打卡第十一天 #每天一个知识点# token就是一块令牌，减少频繁的查询数据库，减轻服务器的压力，第一次登陆之后，服务生成一个token返回给客户端，客户端之后只需带着这个token请求数据即可，无需再次带上用户名和密码。
![[嘿哈]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
react使用localStorage存储token![[强]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_79.6185c09.png)
流程
1）首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端；
2）前端拿到后端返回的 token ,存储在 localStorage 和 Redux里；
3)前端每次路由跳转，判断 localStorage 有无 token ，没有则跳转到登录页，有则请求获取用户信息，改变登录状态；
4)每次请求接口，在 Axios 请求头里携带 token;
后端接口判断请求头有无 token，没有或者 token 过期，返回401；
5)前端得到 401 状态码，重定向到登录页面。
展开评论1 - #每天一个知识点# 打卡第十天
Redux是一个用于管理JavaScript应用程序状态的开源库。它通常与React一起使用，但也可以与其他框架或库结合使用。以下是对Redux的总结：
单一数据源：Redux通过将应用程序的状态存储在一个单一的JavaScript对象中来管理应用程序的状态。这个对象被称为"store"，并且是不可变的。
状态不可变性：Redux鼓励状态的不可变性，这意味着当应用程序的状态发生变化时，需要创建一个新的状态对象，而不是直接修改现有的状态。
动作（Actions）：动作是一个描述应用程序中发生事件的普通JavaScript对象。它们包含一个"type"字段，用于指定动作的类型，以及可选的其他字段，用于传递与该动作相关的数据。
调度器（Reducers）：调度器是纯函数，它根据给定的动作和当前状态来计算下一个状态。它接收当前状态和动作作为参数，并返回一个新的状态对象。
单向数据流：Redux遵循单向数据流的原则。当应用程序的状态发生变化时，Redux通过调度器更新存储的状态，并通知所有订阅了状态变化的组件进行更新。
中间件（Middleware）：Redux提供了中间件机制，使开发者能够对派发的动作进行拦截和处理。中间件可以在动作到达调度器之前或之后执行额外的逻辑，例如异步操作、日志记录等。
连接React：Redux与React结合使用时，可以使用React-Redux库来简化集成过程。它提供了一个高阶组件（higher-order component）connect，用于将Redux存储中的状态映射到React组件的属性，并将动作派发到调度器。展开评论1 - #每天一个知识点# 打卡第九天React中为什么要使用不可变数据（Immutable Data）？可变数据
什么是可变数据(mutable)即一个数据被创建之后，可以随时进行修改，修改之后会影响到原值，那么javascript中有没有这种可变数据，有
javascript中有7中数据类型
基本类型null、undefined、string、number、boolean、symbol
引用类型object
null、undefined、string、number、boolean、symbol都是不可变数据
object一般是可变数据，原因是javascript的对象使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。
不可变数据(Immutable) 就是一旦创建，就不能再被更改的数据。对Immutable对象的任何修改或添加删除操作都会返回一个新的 Immutable对象。![[坏笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_41.2751fc1.png)
待续...... 展开评论1 - 打卡第六天 #每天一个知识点#基于Taro的微信小程序登录授权流程通常包括以下步骤：
小程序初始化：在小程序的入口文件中，引入Taro框架和必要的依赖库，并进行小程序的初始化设置。
获取用户授权：创建一个授权按钮或其他交互方式，在用户点击时触发获取用户信息的操作。
调用微信登录接口：当用户点击授权按钮后，调用Taro提供的wx.login()方法，使用微信登录接口获取临时登录凭证code。
获取用户信息：使用wx.getUserInfo()方法获取用户的基本信息，如昵称、头像等。该步骤需要用户确认授权才能成功获取信息。
发送登录请求：将获取到的临时登录凭证code和用户信息通过HTTP请求发送给后端服务器。
后端验证：后端服务器收到登录请求后，根据微信登录凭证code向微信服务器发送请求，验证凭证的有效性，并获取到用户的唯一标识openid和会话密钥session_key。
生成用户身份凭证：后端服务器使用openid和session_key生成用户身份凭证，例如使用JSON Web Token（JWT）生成一个加密的token。
返回身份凭证：将生成的用户身份凭证返回给前端，通常以JSON格式返回。
前端存储凭证：前端接收到身份凭证后，将其存储在本地，通常使用localStorage或者cookie进行存储。
后续请求认证：在后续的接口请求中，前端将用户身份凭证附加在请求头或请求参数中发送给后端服务器进行认证，并获取相应的数据。
以上是一个基于Taro的微信小程序登录授权的一整个流程。具体实现细节可能会有所不同，可以根据具体项目需求进行调整和扩展。展开评论1 - 打卡第三天 #挑战每日一条沸点#
继续学习react hooks
今天是![[不失礼貌的微笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
useImperativeHandle
当希望父组件受到子组件更改的影响时，效果很好。因此，在诸如焦点改变、递增和递减以及模糊元素之类的情况下，您可能会发现自己需要使用此钩子，以便可以相应地更新父级。
useImperativeHandle (ref, createHandle, [dependencies])useMemo是最少使用但最有趣的 React hook 之一。它可以提高性能并减少延迟，特别是在应用程序中的大型计算上。每次组件状态更新和组件重新渲染时，该useMemo钩子都会阻止 React 重新计算值。
该useMemo钩子接受一个函数并返回该函数的返回值。它会缓存该值以防止花费额外的精力重新渲染它，然后在依赖项之一发生更改时返回它。最好的用例是在您进行大量计算时想要存储值并在后续状态更改中使用它的任何时候。它可以带来不错的性能提升，但过多使用它可能会占用应用程序的内存，从而产生完全相反的效果。
useMemo( () => { // Code goes here }, [] )展开评论1
![[不失礼貌的微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
useImperativeHandle