react
文章平均质量分 64
大青花鱼の
这个作者很懒,什么都没留下…
展开
-
前端进阶之React原理、源码解读-下篇
不折腾的前端,和咸鱼有什么区别!原创 2022-02-22 17:37:04 · 280 阅读 · 0 评论 -
前端进阶之React原理、源码解读-上篇
不折腾的前端,和咸鱼有什么区别!原创 2022-02-17 18:32:44 · 837 阅读 · 0 评论 -
react框架总结
React.js的技术点总结原创 2018-11-23 14:15:31 · 33085 阅读 · 4 评论 -
前端进阶之React VDom的理解
1.虚拟 DOM通过 3 个要点讲解虚拟 DOM:描述浏览器的渲染过程 真实 DOM 操作昂贵,所以需要虚拟 DOM Diff简要做了什么,key在当中扮演什么角色1.1要点:浏览器的渲染过程创建 DOM 树。用 HTML 解析器分析 HTML 元素,创建一棵 DOM 树。 创建 CSS 规则树(CSS rule tree)。用 CSS 解析器解析 CSS 文件和inline样式,生成页面的样式表。 创建 Render 树。将 DOM 树和 CSS 规则树关联起来,构建 Ren...原创 2022-01-08 10:49:28 · 494 阅读 · 0 评论 -
实现html转pdf、多个pdf生成zip
插件: jspdf html2canvas jszip file-saver 实现:先写好html模版 捕捉dom通过html2canvas生成图片 通过jspdf生成pdf pdf先不实例化,等所有pdf生成完之后util.tsimport jsPDF from 'jspdf'import html2canvas from 'html2canvas'export const printPDF = async (domClassName原创 2021-08-12 18:09:47 · 648 阅读 · 0 评论 -
前端进阶之React 15的diff和React16的区别
diff算法与React虚拟dom原创 2020-10-26 15:59:43 · 2471 阅读 · 0 评论 -
React16中render和hydrate的区别
render()ReactDOM.render(<App />, document.getElementById('root'));render话不多说就是渲染的意思,官方解释:在提供的container里渲染一个 React 元素,并返回对该组件的引用(或者针对无状态组件返回null)。 如果 React 元素之前已经在container里渲染过,这将会对其执行更新操作,并仅会在必要时改变 DOM 以映射最新的 React 元素 如果提供了可选的回调函数,该回调将在...原创 2020-09-02 20:33:13 · 4864 阅读 · 0 评论 -
巧妙的通过promise.all节省接口的响应时间
在业务中难免会出现需要等待三四个接口返回之后再处理后续的代码,这个时候一般都会使用async/await来进行处理,那么就会有一个问题:先通过promise来模拟三个接口定时模拟每个接口需要花费的时间。 componentDidMount() { this.PageInit(); } PageInit = async () => { const oldTime = moment(); const fetch = async () => {原创 2020-08-06 10:45:45 · 1611 阅读 · 0 评论 -
React Hooks使用实例
使用hooks注意事项:不能将 hooks 放在循环、条件语句或者嵌套方法内。react 是根据 hooks 出现顺序来记录对应状态的。 只在 function 组件和自定义 hooks 中使用 hooks。 命名规范: useState 返回数组的第二项以 set 开头(仅作为约定)。 自定义 hooks 以 use 开头(可被 lint 校验)。 React 中提供的 hooks: useState:setState useReducer原创 2020-07-22 16:41:42 · 1624 阅读 · 0 评论 -
React、umi和dva之间的关系
前言react(https://react.docschina.org/)umi--路由配置(https://umijs.org/)dva--数据流方案(https://dvajs.com/guide/)Umi和Dva都是基于React的框架,Umi主要以路由为主,Dva主要管理数据流。Antd pro(https://pro.ant.design/docs/getting-started-cn)集成了umi、dva、antd的完整前端脚手架关于UmiJS框架umi是一个可插拔的企业原创 2020-07-22 10:33:09 · 15848 阅读 · 0 评论 -
Taro小程序单位转化和无法使用全局样式
1.界面兼容设计稿及尺寸单位在 Taro 中尺寸单位建议使用px、百分比 %,Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度100px,那么尺寸书写就是100px,当转成微信小程序的时候,尺寸将默认转换为100rpx,当转成 H5 时将默认转换为以rem为单位的值。如果你希望部分px单位不被转换成rpx...原创 2020-07-21 13:22:27 · 1828 阅读 · 0 评论 -
前端路由、后端路由、react-router区别
后端路由:后端路由又可称之为服务器端路由,因为对于服务器来说,当接收到客户端发来的HTTP请求,就会根据所请求的相应URL,来找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端。对于最简单的静态资源服务器,可以认为,所有URL的映射函数就是一个文件读取操作。对于动态资源,映射函数可能是一个数据库读取操作,也可能是进行一些数据的处理,等等。然后根据这些读取的数据,在服务器端就使用相应的模板来对页面进行渲染后,再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍,比如京东页面就是个后端路由原创 2020-06-17 19:35:09 · 870 阅读 · 0 评论 -
react之高阶组件(HOC)
定义高阶组件(HOC)是 React 中用于重用组件逻辑的高级技术。 HOC 本身不是 React API 的一部分。 它们是从 React 构思本质中浮现出来的一种模式。具体来说,高阶组件是一个函数,能够接受一个组件并返回一个新的组件。理解: 一类特别的函数a. 情况 1: 参数是函数b. 情况 2: 返回是函数常见的高阶函数:a. 定时器设置函数b. 数组的 map()/filter()/reduce()/find()/bind()c. react-redux 中的 connec原创 2020-06-08 18:01:50 · 458 阅读 · 0 评论 -
react之纯函数、函数组件
纯函数 Pure Function定义:一个函数的返回结果只依赖于它的参数,并且在执行的过程中没有副作用,我们就把该函数称作纯函数。特点1. 函数的返回结果只依赖于它的参数。let foo=(a, b)=>a+bfoo(1,2) //=32. 函数执行过程里面没有副作用。什么是副作用除了修改外部的变量,一个函数在执行过程中还有很多方式产生外部可观察的变化,比如说调用 DOM API 修改页面,或者你发送了 Ajax 请求,还有调用 window.reload 刷新浏览器,原创 2020-06-08 16:59:53 · 4481 阅读 · 0 评论