react系列
文章平均质量分 78
react学习之路上的一些笔记
coderlin_
幸运=99%的努力+1%的运气
展开
-
一库让你快速搭建redux。auto-redux,跟普通hooks一样使用redux。
前言:借鉴于组内大佬开发的一个库的思路,模拟实现一个类似的。redux使用过redux的同学应该知道,redux每一个状态都需要编写特定的action和reducer,通过react-redux提供的hooks,useDispatch,useSelector去获取状态,派发aciton。比较麻烦。基于需要编写action和Reducer这一点,开发一个可以根据最初的state,自动生成action,reducer,我们使用状态的时候只需要跟useState等普通hooks一样。auto-redux介绍原创 2022-05-24 23:33:16 · 202 阅读 · 0 评论 -
react18初识
react18以于2020年3月29日发布正式版本。变更日志看看怎么使用react18。启动react18只支持并发模式,也就是不支持ReactDOM.render启动项目需要这样启动ReactDOM.createRoot( document.getElementById('root')).render(<App/>)批量更新在Councurrent模式中,更新是以优先级为依据进行合并的。18之前的批量更新,setTimeout或者Promise.then的更新,react无原创 2022-03-30 23:51:36 · 1739 阅读 · 0 评论 -
react性能优化-懒加载原理
编译阶段的优化开发阶段构建更快loader的include和exclude属性 { test: /.(j|t)sx?$/, use: [ { loader: "thread-loader", }, { loader: "babel-loader", options: { presets: [原创 2022-03-11 08:39:23 · 2392 阅读 · 0 评论 -
前端流程图调研
react-flow (免费)官网数据展示:使用position调整每个数据的位置,使用source,target调整每条连线的位置。展示label可以使用html元素。交互:可添加连接线,删除节点(无法通过control+z撤回),修改节点内容,看官网案例好像不支持新增节点,而且修改节点感觉比较麻烦。应该是属于一个主要“展示”流程图的工具。jsPlumb ( 商业版收费,社区版免费功能较少 )官网gojs 收费(商业版收费,功能较强大)官网基于HTML5 Canvas,功能强大,但是api较原创 2021-11-16 17:06:11 · 2156 阅读 · 0 评论 -
手撕redux
reduxredux是一个全局状态管理库,通过Provider,依赖注入store,sotre可以看作一个容器,用来存放state。通过用户触发dispatch action, store会调用对应的reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State ,reducer根据action的type返回最新的state。state一档发生变化,store就会调用监听函数改变视图。模拟reduc的实现通过createContext去实现类似re原创 2021-10-16 16:08:40 · 142 阅读 · 0 评论 -
react源码学习(3-1)实现
状态更新我们知道render阶段是用于更新的时候根据更新的内容进行fiber树的创建。开始于performSyncWorkOnRoot(同步)或者performConcurrentWorkOnRoot(异步。),而一般的流程是状态更新->render->commit那从状态更新到render阶段,做了什么呢?创建upDate对象upDate在react中,可以通过ReactDOM.render,this.setState,this.forceUpdate, useState,us原创 2021-10-08 09:34:35 · 216 阅读 · 1 评论 -
react源码学习2(架构)
深入jsx学习在react16的时候,jsx会被babel转化为React.createElement,craeteElement返回一个对象。该对象使用$$typeof显示标识为React Element,这点可以通过react提供的isValidElement来判断该对象是否是React Element。在17的时候,jsx可以不再被转为React.createElement,也就是不用显示引入React就可以转为浏览器可以运行的代码,因为createELement在调优方面不可以做更多的事情详原创 2021-09-26 10:02:45 · 189 阅读 · 0 评论 -
react源码学习1(理念)
理念react的官网介绍是构建快速响应的大型web应用。重点是快速响应制约快速响应主要有两种方式:1 当遇到大量计算的时候,设备性能不足页面掉帧,导致卡帧(cpu瓶颈)2 网络响应慢 (io瓶颈)1 cpu瓶颈浏览器的的主要刷新频率是60hz,也就是一帧大概16ms浏览器每一帧完成的动作有:执行js脚本->样式布局->样式绘制而js线程与gui渲染线程是互斥的,就是执行js脚本不会执行布局绘制,执行布局绘制不会执行js脚本。而我们有些操作比如同时渲染一个3000长度的数组,此原创 2021-09-06 09:44:28 · 275 阅读 · 0 评论 -
从零实现简单react (2)
fiberreact fiberhttps://zhuanlan.zhihu.com/p/26027085这篇文章有解释fiber之前的协调,react会递归比对虚拟dom树,找出需要更新的节点然后同步更新他们,这个过程称为Reconcilation(协调)在协调期间,react会一直占用浏览器资源,这样就会到这用户触发的事件得不到响应,还会导致掉帧,用户会感觉到卡顿。一个虚拟dom也是最小工作单位,但其工作超过16ms,react也没办法,所以会造成卡顿。这中调度方式叫做合作式调度,需要浏览原创 2021-08-22 23:46:51 · 148 阅读 · 1 评论 -
react+ts仿antd icon库
icon库从上古时代的雪碧图,到近代的font-icon,到现代的svg(开个玩笑),越来越多的开发人员选择了svg,因为他们即取即用,并且不会出现项font-icon很多不知名的Bug。这个icon库是以font-awesome为基础包装成自己的icon组件库。他山之石可以攻玉嘛先来安装三个库cnpm i --save @fortawesome/fontawesome-svg-corecnpm i --save @fortawesome/free-solid-svg-icons(免费的库,也有要原创 2021-03-20 00:41:06 · 500 阅读 · 1 评论 -
react项目网页端适配(利用自定义hooks)
思路就是利用window的resize事件,监听窗口变化,再利用hooks函数,在生命周期创建前监听,在生命周期结束时取消监听。具体看代码这个useLifecycles是react-use的一个模仿组件的componentDidMount,和componentWillUnmount。也可以利用useEffect(()=>{},[])代替,接着就是监听window的resize事件,然后触发serRemFunc函数。再看看setRemFunc的实现。思路是,封装一个类,传入设计稿大小,要转换的比原创 2021-03-15 15:11:09 · 1224 阅读 · 0 评论 -
react+ts开启旅游电商项目(项目初期准备,引入craco,antd,配置别名,usehooks适配,resetful,引入redux,redux-thunk,immutable,)
项目第一步 确认业务旅游电商电商四套主线业务:展示旅游路线,网站登录,购物车结果,下单购买二级业务:主页推荐,关键词搜索,登陆注册,购物车操作,订单历史记录所以可以分成四个模块,产品模块,用户模块,购物模块,订单模块产品模块:主页推荐,关键词搜索, 展示旅游路线用户模块: 登陆注册购物模块: 购物车操作订单模块: 订单历史记录流程规划安装ts的css模块化cnpm isntall typescript-plugin-css-modules --save组件库使用antd,考虑一个原创 2021-04-08 23:56:14 · 1339 阅读 · 3 评论 -
react+ts实现简单jira项目
练手的一套项目react+ts虽然内容较少,但是干货挺多,尤其是对hooks的封装,ts的泛型的理解,使用更上一层楼项目代码:https://gitee.com/fine509/react_jiar效果图这是三个主要页面,还有一些小细节等等一些值得注意的地方(只是讲大概的功能,没有具体的详解怎么用)使用错误边界处理,getDerivedStateFromError来处理当某个页面某处地方有报错的时候显示报错组件而不是挂掉。useSearchParams的使用这个api可原创 2021-07-29 22:49:12 · 675 阅读 · 3 评论 -
react手机端app王者荣耀项目适配+工具类定义
1 项目起步之适配原理是监听页面的resize对Hmtl赋予不同的font-size,使用rem进行开发。项目起步之scss工具类一般我们做一个项目可以看下ui,颜色大概有哪些,字体大小大概有哪些,然后使用工具类首先是颜色的工具类,这是scss的一些语法。在项目使用...原创 2021-07-07 08:56:52 · 96 阅读 · 0 评论 -
tsconfig.json文件解析,以及react setState异步同步问题
用react的脚手架启动一个ts项目,会有一个tsconfig.json文件,这个是typescript的编译配置。noImplicitAny,显示报错any,设为false后,当你的代码参数没有赋予类型时,也不会报any的错targetlib全部放上去吧...原创 2021-04-08 15:51:56 · 405 阅读 · 0 评论 -
从零实现react(3) hooks
diff dom老知识点了,配置babel,对Jsx语法转换成React.createElement,使用自己定义的createElement,使用自己定义的createElement。这个element的话Babel会转化成createElement,虚拟dom就打印出来了。实现初次渲染思路每个fiber有三个指针,return,child,next。...原创 2021-08-27 08:49:55 · 120 阅读 · 0 评论 -
react封装自定义Hooks完成日常loading与error俘获,以及登录状态管理useContext代替redux
封装自定义Hooks完成loading以及俘获失败功能我们知道,一般我们用户交互都是有loading,以及接口报错,那么是否我们之前写的代码都是类似于,网络请求前setloading(true),返回结果在setLoading(false),报错的时候我们是俘获catch然后setError(err.response.data.message)等等的操作,那么当我们有多个请求方法的时候,这样写未必太过繁杂。思路: 将loading的状态,error的状态,以及网络请求封装到一个hooks,不改变请求,只原创 2021-07-24 00:41:33 · 1825 阅读 · 0 评论 -
react+ts+node完成王者荣耀官网项目
该项目是根据b站全栈之巅的vue+node完成王者荣耀官网,自己实现的一个react版本的,不得不说vue跟react写起来真是不太一样。成果图后台管理界面app端。。。。。gitee地址app端: https://gitee.com/fine509/react_app管理端: https://gitee.com/fine509/kings-glory-management-end后台: https://gitee.com/fine509/kings-glory-bac原创 2021-07-18 14:14:25 · 1349 阅读 · 8 评论 -
开发自己的脚手架(react)
开发自己的脚手架因为我们使用脚手架创建项目的时候,很多配置都是没有的,比如路由的匹配,redux,这些,所以我们可以开发自己的脚手架。第一步我们希望可以在命令行敲下某个命令时,执行代码,如只需要新建两个文件,这个注释是关键,固定用法,然后在package.json文件加一个属性bin指定输入aaa的时候用node执行index.js,这时候在npm link后,就可以i输入aaa执行index.js文件了,效果跟node index.js一样。那我们想跟命令呢比如 aaa -v, a原创 2021-06-01 23:55:16 · 649 阅读 · 7 评论 -
react+ts 仿antd input输入框
input框首先我们先确定我们的Input组件的需求,1 有大有小 size属性2 后面可以加图案 icon属性3 可以前后缀 prepand/append4 是否禁用 disabled当我们自己想封装一个组件时,这个接口首先要继承input本身有的属性,如type,id等等,所以要继承于InputHTMLAttributes<HTMLElement 》其次,因为input标签本身就拥有size属性,故我们要忽略它,用Omit<>即可。IconProps是frotawesome原创 2021-03-20 18:27:55 · 983 阅读 · 2 评论 -
react封装useForm
封装一个antd的Form表单效果:只需传入配置文件定义配置类型整体:import React, { memo, useEffect, useRef } from "react";import { Form, Input, Button, Checkbox, Select, FormInstance } from "antd";import { Props } from "./type";import "./HFrom.style.scss";import { Upload }原创 2021-09-05 13:15:31 · 2533 阅读 · 0 评论 -
开发自己的脚手架(react)2
续https://blog.csdn.net/lin_fightin/article/details/117387415已发布: 可直接 npm install lincli-react1 -g然后通过lincli create xxx创建项目上次讲到从npm拉模版,接着继续未完成的步骤,执行npm install,yarn start,以及打开浏览器npm install定义一个帮助我们执行终端命令的函数,通过spawn可以开一条子进程来执行命令,返回的是子进程childProcess,原创 2021-08-03 17:26:26 · 106 阅读 · 0 评论 -
简单实现 ReactDom.render(el,root)
React.createElement我们知道jsx是React.createElement的语法糖,而且React.createElement返回的其实也是一个对象,所以我们简单封装了下React.createElement,如图使用的时候可以使用babel的一些插件,将jsx语法转化成React.createElement,可以百度搜教程,这里直接使用在线babel转换,然后打印下我们ele看是什么,然后就需要挂载模板了这个render函数我们可以自己简单实现一下,如图首先可以判断原创 2021-03-07 12:37:23 · 507 阅读 · 0 评论 -
从0实现简单react(hooks)
先了解一些基础知识屏幕刷新率一般电脑刷新率是60次/s,而页面是一帧一帧渲染的,而当帧数达到60时,页面就是流畅的,而小于这个值时,用户就会感觉到卡顿。浏览器刷新频率一般和屏幕一样,因为有一个vSync标记符,显卡会在每一帧开始时间给浏览器窗口发送一vSync标识符。帧每个帧的开头包括样式计算,布局,绘制,js引擎和页面渲染引擎是在同一个渲染线程,而页面渲染引擎(GUI)和js引擎是互斥的,如果某个任务执行时间过长,浏览器就会推迟渲染,从而造成卡顿,react16就解决了这个问题。一帧做的事,输原创 2021-07-02 00:06:27 · 207 阅读 · 2 评论 -
简单实现react,react函数组件,类组件生命周期等,非fiber非diff
简单实现react功能先看效果这里的ReactDom.render是自己简单实现的。实现基本的dom更新还有生命周期函数。环境这个gitee地址 https://gitee.com/fine509/react_code/tree/master环境是使用webpack搭建的一个简单的可以解析jsx的一个环境,如图babel-loader的设置是然后只要yarn serve就可以启动项目了,如果对webpack不熟,之前写的一些文章有比较详细的讲解wbepack的。主要实现reactD原创 2021-06-03 23:42:26 · 153 阅读 · 3 评论 -
全栈项目(react+ts改造b站全栈vue项目) 王者荣耀app端web管理端+node后台 上传图片问题,react富文本问题
技术: react+ts+node+express+mongodb1 上传图片问题借用antd库的upload组件,action参数是图片传去的后台地址,逻辑就是,上传图片到后台,后台暴露静态资源,然后返回url给前端即可。这里使用了express的中间件,然后引用multer这个库做处理,当我们点击上传后接着第二个中间件就可以通过req.file拿到信息接着将静态资源接口开放,然后返回url地址。这样前台就能拿到url的地址了。...原创 2021-05-20 00:20:50 · 256 阅读 · 1 评论