react
文章平均质量分 54
行致
这个作者很懒,什么都没留下…
展开
-
react-hooks进阶(相关源码学习)
schedule:调度器—》scheduler 内有优先级队列。高优任务优先进入下一步处理(reconciler)(schedule是在react16之后新增的)render:协调器 ==》reconciler 存在虚拟dom fiber就是虚拟Dom,负责找出变化的组件,当前和上一步工作都在内存中进行。只有当所有组件都完成Reconciler的工作,才会统一交给Renderer。commit:渲染器 ==》renderer 负责将变化的组件渲染到页面上。原创 2023-06-14 20:21:43 · 304 阅读 · 0 评论 -
react-view的使用
react-view的使用原创 2022-11-14 14:24:48 · 1995 阅读 · 0 评论 -
如何动态添加script依赖的脚本
如何动态添加script依赖的脚本原创 2022-07-26 10:56:32 · 1336 阅读 · 1 评论 -
PC端react实现一键复制图片功能
PC端react实现一键复制图片功能用到的工具库b64-to-blob、html2canvas具体方式过html2canvas,就可以获取完整的dom节点,再通过b64-to-blob,将base64格式转换成blob,将blob赋值到浏览器剪切板就大功告成了复制功能代码const copy = () => { html2canvas(imgRef.current, { useCORS: true }).then((canvas) => { c原创 2022-05-25 14:50:30 · 899 阅读 · 1 评论 -
React报错:Can‘t perform a React state update on an unmounted component. This is a no-op, but it ind...
React报错:Can’t perform a React state update on an unmounted component. This is a no-op, but it ind…原因是:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 ,组件都被销毁了,还设了setstate处理解决的方案://利用生命周期钩子函数:componentWillUnmountcomponentWillUnmount() { this.setState = (state, callba原创 2022-01-20 16:54:33 · 3933 阅读 · 0 评论 -
react-router-cache-route — 页面缓存插件
react-router-cache-route — 页面缓存插件功能此插件可以满足缓存上一页的功能,即:返回上一页的时候,上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。简介搭配 react-router 工作的、带缓存功能的路由组件,类似于 Vue 中的 keep-alive 功能。原理Route 中配置的组件在路径不匹配时会被卸载(render 方法中 return null),对应的真实节点也将从 dom 树中删除,利用Route暴露的children方法,让我们手动控制渲原创 2021-03-10 14:57:02 · 1304 阅读 · 0 评论 -
React-Canvas画图
react+Canvas基本用法html代码{/* 拼图 */} <canvas width='300' // 可设置画布的大小 height='800' ref={(ref) => { this.canvasRef = ref; }} ></canvas>js代码想要在canvas区域里画图, 第一步需要取得绘图上下文,而取得上下文对象的引用,需要调用getCont原创 2021-05-14 15:19:58 · 2951 阅读 · 0 评论 -
react生命周期详解(新)
react生命周期详解(新)在react16之后,有三个生命钩子被废弃:componentWillMount、ComponentWillReceiveProps、componentWillUpdate。因为这些生命钩子容易被误解和滥用。react16.8+ 生命周期分为三个阶段:挂载阶段、更新阶段、卸载阶段挂载阶段:constructor: 构造函数,最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定thisgetDerivedStateFromProps: static原创 2021-12-13 16:56:21 · 130 阅读 · 0 评论 -
react中可使用的video插件
react中可使用的video插件在react中使用video,并且兼容不同浏览器(特别是ie),那就不得不借助插件来实现自己的目的,下面有几个插件使用:一、使用 video-react (在react中推荐使用)1、直接下video-react插件$ npm i video-react2、在所需的插件出导入import { Player } from "video-react";...return ( <Player ref={player} videoId="video-原创 2021-08-23 18:58:51 · 9395 阅读 · 0 评论 -
常见异步操作进行同步处理
常见异步操作进行同步处理async…await… 与 promise在使用async和await进行将异步改成同步处理时, 所使用的函数返回的值必须是返回的promise对象的数据,否则不会达到异步改成同步操作的处理实操代码:const Func = ()=>{ return new Promise<any>(async (resolve, reject) => { // 最外层 try { let data = 'promise'原创 2021-08-12 16:33:10 · 1316 阅读 · 0 评论 -
react中字符标签转换的展示
react中字符标签转换的展示在react中获取的字符串标签转换成正常的标签在浏览器中展示标签内的数据,react提供了一个API:dangerouslySetInnerHTML,它可以帮助转换成正常标签及内的数据;<div className="policy-styles" dangerouslySetInnerHTML={{ __html: htmlContent}}></div>htmlContent表示展示要做div内的字符标签,如let htmlContent =原创 2021-05-28 10:05:22 · 783 阅读 · 0 评论