react
文章平均质量分 69
ass_ace
选择你所喜欢的,爱你所选择的
展开
-
想写好前端,先练好内功
前言封不平听在耳里,暗叫:“到这地步,我再能隐藏甚么?”仰天一声清啸,斜行而前,长剑横削直击,迅捷无比,未到五六招,剑势中已发出隐隐风声。他出剑越来越快,风声也是渐响,剑锋上所发出的一股劲气渐渐扩展,旁观众人只觉寒气逼人,脸上、手上被疾风刮得隐隐生疼,不由自主的后退,围在相斗两人身周的圈子渐渐扩大,竟有四五丈方圆。泰山派的一个道士在旁说道:“气宗的徒儿剑法高,剑宗的师叔内力强,这到底怎么搞的?华山派的气宗、剑宗,这可不是颠倒来玩了么?《笑傲江湖》中的“剑宗余孽”封不平本想仗着有嵩山派撑腰,一举夺转载 2021-08-05 11:15:36 · 145 阅读 · 0 评论 -
精读《React 18》
React 18 带来了几个非常实用的新特性,同时也没有额外的升级成本,值得仔细看一看。下面是几个关键信息: React 18 工作小组。利用社区讨论 React 18 发布节奏与新特性。 发布计划。目前还没有正式发布,不过@alpha版已经可用了,安装 alpha 版。 React 18 新特性介绍。虽然还未正式发布,但特性介绍可以先行,本周精读主要就是解读这篇文档。 精读总的来说,React 18 带来了 3 大新特性: Automatic batch...转载 2021-07-30 15:12:55 · 309 阅读 · 0 评论 -
react——利用jszip实现文件批量下载并打包成zip文件
本文章主要记录利用jszip实现文件批量下载图片,文档。mp3,视频(MP4)等文件,一般而言前端实现下载功能一般都是通过a链,这在下载单个文件的场景很实用,但如果是批量下载很多个文件,同样也可以用a链接实现但是...原创 2021-06-15 17:13:35 · 3851 阅读 · 7 评论 -
react —— 复制定制化带有标题的二维码
1. 生成二维码直接借助qrcode这个npm库即可生成二维码,但接到的需求要求是在鼠标点击的附近展示出二维码,点击弹窗里面的复制按钮即可赋值带标题的二维码图片到剪切板,实现效果如下图:...原创 2021-06-10 23:58:37 · 460 阅读 · 3 评论 -
理解useMemo与useCallback的使用场景
回顾在介绍一下这两个hooks的作用之前,我们先来回顾一下react中的性能优化。在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件。当时我们也知道,react中,性能的优化点在于:调用setState,就会触发组件的重新渲染,无论前后的state是否不同 父组件更新,子组件也会自动的更新基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState;在shouldComponentUpdate中判断前后的props转载 2020-12-19 23:40:28 · 11918 阅读 · 6 评论 -
react——同步获取useState的最新状态值
新的react hook写法,官方默认setState方法移除了回调函数,但我们有时候的业务场景需要我们同步拿到变量的最新变化值,以便做下一步操作,这时我们可以封装一个hook通过结合useref通过回调函数来拿到最新状态值。代码如下:import {useEffect, useState, useRef} from "react"; function useCallbackState1 (state) { const cbRef = useRef(); const [da原创 2020-12-19 22:44:57 · 16521 阅读 · 9 评论 -
传送门:React Portal
转载自:https://zhuanlan.zhihu.com/p/29880992React v16增加了对Portal的直接支持,今天我们就来聊一聊Portal。似乎所有说React Portal都直接用Portal这个单词,没听过这词的朋友可能觉得不知所云,其实,Portal可以有一个很形象的翻译——“传送门”。什么是传送门?曾经有一款游戏就叫做Portal,玩家手上一杆很厉害很科幻的枪,朝墙上开一枪,就可以开出两个“传送门”,人钻进这个传送门,可以从另一个传送门里走出来,也就是说,两个转载 2020-10-15 23:56:06 · 722 阅读 · 0 评论 -
svgr-webpack把ts中svg转成react component
1.在项目中使用svg的好处:① 不失真, 放大缩小图像都很清晰;② SVG文件是纯粹的XML, 也是一种DOM结构,可以在svg文件中删减一些无用的写死大小的代码,然后在引入svg的时候通过css自定义其大小颜色,提高复用率。③ 文件比一般的jpg.png图片较小。2.用法1.安装svgr-webpacknpm install @svgr/webpack --save-dev// or use yarnyarn add @svgr/webpack --dev2.在原创 2020-05-24 11:11:25 · 3445 阅读 · 3 评论 -
package.json配置说明
package.json文件的作用在git上克隆很多项目下来之后我们的第一件事是 npm run install,我们会知道这个指令是为项目下载项目运行所需要的依赖包,但这个指令下载什么包,下载某个包的哪个版本的一句从哪里来呢?答案就是package.json这个文件。package.json定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm i...原创 2020-04-17 22:47:10 · 1577 阅读 · 0 评论 -
react——高阶组件
1. 什么是高阶组件高阶组件就是接受一个组件作为参数,并返回一个新的组件的函数(高阶组件是一个函数,并不是一个组件)当有多个组件有相同的结构或者可重用的逻辑时,可以把相同的部分抽离成高阶组件2. 高阶组件的分类1). 代理方式的高阶组件代理式的高阶组件:返回的新组件类直接继承自React.Component类,新组件扮演的角色是传入参数组件的一个代理,在新组件的render函数中,将...原创 2020-04-06 15:12:37 · 161 阅读 · 0 评论 -
Module build failed: TypeError: this.getResolve is not a function at Object.loader 安装node-sass运行报错
在react项目中安装支持scss文件的相关模块cnpm install --save-dev css-loader style-loader node-sass sass-loader运行之后报错如下:这是因为当前sass的版本太高,webpack编译时出现了错误,这个时候只需要换成低版本的就行,,找到package.json文件,里面的 "sass-loader"的版本更换掉...原创 2020-04-06 00:25:52 · 145 阅读 · 0 评论 -
react——组件 state
1. 设计合适的state 一个组件的任何UI改变都可以从state的变化中反应出来,一个合适state必须代表一个组件的UI呈现的最小状态集。即state中所有的状态都用于表现UI的变化,没有任何多余的状态;也不应该包含任何可以由其他状态计算可以得到的中间状态。栗子:假设需要开发一个购物车组件,需要展示的信息有购买的物品列表以及物品的总价格。设计 state如下:{ p...原创 2019-08-31 21:46:18 · 942 阅读 · 0 评论 -
react组件的生命周期的介绍以及适用场景
1.什么是组件的生命周期,能干什么? 组件从被创建到被销毁的过程就叫做组件的生命周期。 react为组件在不同的生命周期阶段提供不同的生命周期方法,让开发者可以在组件的生命周期过程中更好地控制组件的行为。2.react生命周期函数有哪些,什么时候使用? 组件的生命周期主要分为三个阶段:挂载、更新、卸载。 下图为生命周期流程图,在流程图中可以很...原创 2019-08-06 21:31:49 · 455 阅读 · 0 评论 -
React事件绑定模式:处理this的的五种方法
在React中至少有五种方法可以处理“this”上下文,而这五种方式主要根据es5、6、7的不同语法特性有如下的划分:接下来 是对这五种方法的详细介绍:1.使用es5的React.createClass当使用es5时,React会自动帮助我们给每一个函数绑定“this”上下文,所以我们不再需要手动绑定。var HelloWorld = React.createClass(...原创 2019-07-14 20:29:25 · 358 阅读 · 0 评论 -
用react实现FileReader结合canvas在前端实现压缩图片并在线预览
用react实现FileReader结合canvas在前端实现压缩图片并在线预览import React, { Component } from 'react';import './Total.scss'class Imageouput extends Component { constructor(props) { super(props); th...原创 2019-05-21 22:19:07 · 2606 阅读 · 0 评论 -
react将一段xml格式的字符串格式化输出并有序的缩进
react将一段xml格式的字符串格式化输出并有序的缩进import React, { Component } from 'react';import ReactDOM from 'react-dom';class FormatXMML extends Component { constructor(props) { super(props); thi...原创 2019-05-21 22:07:32 · 2906 阅读 · 0 评论 -
用react完成一个个人简介页面
这虽然是一个简单的页面,但是在不断优化的过程中,我真真切切的体会到,一个页面完成它只是一个最最基本的事情,如何让你的代码利用率最高,复用性发挥到最大,让设计出来的组件真的只用来渲染数据而已,尽可能的减少if、else之类的判断,才是我们需要仔细体会研究的,同时,我也深刻体会到react的首要思想:用组件件来开发应用的真正意义所在。还有就是一个合理的数据结构能够帮助我们大大减少冗余的逻辑判断...原创 2019-02-28 20:18:57 · 2514 阅读 · 0 评论 -
兄弟组件之间的传值
1. 利用相同的父组件进行兄弟组件之间的数据传递子组件A通过回调函数的形式将数据传递给父组件,父组件再通过属性将数据传递给子组件B代码示例如下:父组件class CommentApp extends Component {constructor() {super()this.state = {info: []}}handleSubmit(con) {...原创 2019-02-24 10:57:09 · 5108 阅读 · 0 评论