随笔分类 - react
chrome89不再支持/deep/的解决方案： css-loader-deep-remove
摘要：解决方案： 大家可以用这个插件，css-loader-deep-remove 代替css-loader https://www.npmjs.com/package/css-loader-deep-remove 发现使用chrome最新版（v89），有个别样式出现了问题，排查定位后发现是有些错误地嵌套
阅读全文
2021前端会有什么新的变化
摘要：2020年前端圈带来具有突破意义的内容或框架不多，也不会再有2013年到2017间日日新的框架大战局面，也不会有Node全栈之争，也不会因为React-Native、Weex、Flutter这类跨端而欣喜若狂。 我能看到的是今天前端已趋于稳定，在深水区探索，比如蚂蚁金服的x6，在图形可视化方面做的就
阅读全文
大文件分片上传，断点续传，秒传
摘要：前段时间做视频上传业务，通过网页上传视频到服务器。 视频大小 小则几十M，大则 1G+，以一般的HTTP请求发送数据的方式的话，会遇到的问题：1，文件过大，超出服务端的请求大小限制；2，请求时间过长，请求超时；3，传输中断，必须重新上传导致前功尽弃； 解决方案： 1，修改服务端上传的限制配置；Ngi
阅读全文
react使用antd数据改变视图没更新原因
摘要：antd中被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果： 你不再需要也不应该用 onChange 来
阅读全文
使用 ESlint、lint-staged 半自动提升项目代码质量
摘要：最近在项目部署了ESlint还有一些配套的工具，比如 prettier husky lint-staged，有些心得写出来分享下。 依据本篇可以实现在git commit之时，重新格式化代码，同时进行代码检查预防一些低级错误。最终期待项目中的开发人员提交到线上的代码符合代码规范、风格统一，看起来像是
阅读全文
Tree-Shaking原理
摘要：一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目
阅读全文
vue/react: 父组件中请求数据好？还是子组件中请求数据好？
摘要：1、如果现在有一个父组件，3个子组件。 每个组件展示的数据不同，现在有2种数据获取方式。第一种，在父组件中获取所有的数据，然后使用props传递给每个子组件。第二种：各个子组件中获取各自的数据。 、你觉得哪种好？为什么？ 答： 根据实际业务来 如果数据其他组件用不到,那么可以由子组件自己获取如果数据
阅读全文
react组件通信方式总结
摘要：1.props和方法 一、父组件向子组件传值 父组件通过属性的方式传递参数，子组件通过props来接收父组件传递过来的参数 React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图：在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个par
阅读全文
Vue@某人，At某人，仿新浪微博@某人，@user，艾特，艾特某人
摘要：vue-atuser Vue@某人，At某人，仿新浪微博@某人，@user vue-edit Vue实现渲染数据后控制滚动条位置 📜 Element.scrollIntoView() Element.scrollIntoView() // 如果为false，元素的底端将和其所在滚动区的可视区域的底
阅读全文
父组件与子组件生命周期钩子顺序是什么
摘要：一、渲染过程 父组件挂载完成一定是子组件挂载完成之后，才算是父组件挂载完成，所以父组件的mounted在组件间的mounted之后。 父beforeCreate-->父created-->父beforeMounte-->子beforeCreate-->子created-->子beforeMounte
阅读全文
vue&react组件通信原理：发布-订阅模式的实现原理
摘要：//发布-订阅模式 //订阅：给自定义事件绑定函数。调用代码：on(ele,'myClick',fn) function on(ele, type, fn) { if (/^self/.test(type)) {//1、给所有浏览器的某个自定义事件绑定多个函数 if (!ele['selfEvent
阅读全文
前端嵌入视频直播和聊天支持.m3u8格式
摘要：1、安装vue-video-player npm install vue-video-player --save 2、在main.js中引入vue-video-player import VideoPlayer from 'vue-video-player' require('video.js/di
阅读全文
fiber
摘要：背景React15 react核心思想： 内存中维护一颗虚拟DOM树，数据变化时（setState），自动更新虚拟DOM，得到一颗新树，然后diff新老虚拟DOM树，找到有变化的部分，得到一个change(patch)，将这个patch加入队列，最终批量更新这些path到DOM中。简单说就是：dif
阅读全文
文件下载重命名（可跨域）
摘要：一、正常情况下，我们都如此下载文件并修改文件名，在a标签上面添加download属性 var link = document.createElement('a'); link.href = file.url; link.download = file.name; link.target="_blan
阅读全文
标签下载文件重命名失败，download 无效
摘要：最近用到<a>标签实现文件下载并对文件进行重新命名，遇到了一些问题，文件重命名一直失败，所幸最终还是解决了，在此记录一下，避免后来者踩坑。 HTML <a> 元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接，其中href和download是我们下载文件所需要的
阅读全文
函数式注释、文件头部注释
摘要：代码注释的魅力所在 标准函数式注释 /*方法说明 *@method 方法名 *@for 所属类名 *@param{参数类型}参数名 参数说明 *@return {返回值类型} 返回值说明 */ 文件头部注释 /* * @Description: In User Settings Edit * @Au
阅读全文
纯前端跨域下载pdf链接文件解决方案
摘要：一,介绍与需求 1.1,介绍 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 问题:Chrome 会自动调用内置的 pdf 阅读器打开 1.2,需求 在谷歌(Chrome)浏览器中,使用a标签属性download下载pdf
阅读全文
点击a标签下载当前链接的图片&&js 通过 blob 类文件对象下载图片，修改图片保存的名字（兼容式写法）
摘要：若想点击a标签就下载当前链接的图片，首先必须文件是同源的，在a标签上增加download属性，才能触发点击下载的效果，若不同源的话则变成在当前页面打开该图片了。 若想要下载不同源的文件，有一种思路是将图片转为base64再赋值给a标签，这样点击后应该就能够下载了 问题：通过a标签下载图片，只有谷歌浏
阅读全文
react解析html的dangerouslySetInnerHTML
摘要：不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击 的原因之一。 我们的设计哲学是让确保安全应该是简单的，开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图
阅读全文
React 如何解析从后台读取的内容是html格式代码(带样式)
摘要：React中是不解析直接从后台拿到的html格式的代码，因为是要防止XSS攻击。什么是XSS攻击，在下一个博客里面出现。所以要让react解析从后台拿到的html格式的代码就要用到以下代码，话不多说： import React from 'react' class IndexCom extends
阅读全文
