匆匆丶丶-优快云博客

我们在使用React开发过程中经常会遇到父组件引入子组件的情况，在不做其他处理的时候，很容易造成子组件不必要的重复渲染。看下面一个的例子，这种情况下，每次父组件更新num值的时候，子组件也会重复渲染。function Child(props){ return( <div>{props.title}</div> )}function Parent(){ const [num, setNum] = useState(1); re.

2022-05-30 01:02:23 353

原创 React 使用正则在字符串标签中插入组件

最近遇到一个需求，需要将后端返回的字符串标签中的span标签替换为组件，且渲染在页面上，字符串标签的格式如下const str = `<p>分析发现xx街道辖区内上报商铺飞线充电事件<span class="dataItem">${"id":1,"name":"xx区X街道X事件X时间段X问题来源X数据来源的数量"}</span>起，占街道事件总数的<span class="dataItem">${"id":5,"name":"xx区X街道X事.

2022-05-04 13:27:38 1256

原创 React最常用的两个Hook

1. 什么是hookhook是React 16.8新增的特性，专门用在函数式组件，它可以代替class组件中react的其他特性，是实际工作中要常用到的hook是专门配合函数式组件开发使用的，可以用它代替class组件的一些生命周期，避免大量this引起的混乱，因此hook便于开发，且更易于让开发者理解代码2. useStateimport React,(useState) from 'react'export default function useState_Demo() { cons

2022-04-05 17:14:58 395

原创前端实现@功能

思路键入 @ 后将选择框显示出来点击选择框中的选项时，返回输入框输入框中显示 @xxx将光标定位在 @xxx 以后删除 @xxx 时须要整个 @xxx 一块儿删除实现主要是使用 selection 和 range 这两个关于选区对象和光标对象，结合div 的 contenteditable 属性实现步骤先有一个可编辑的 div 元素<div id="atInput" contenteditable onKeyDown="onKeyDown"/&gt

2022-02-28 20:45:52 2029

原创 Promise解决回调地狱

回调函数当一个函数作为参数传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。我们熟悉的定时器和Ajax中就存在有回调函数function show(){ console.log('不讲武德');}setTimeout(show,5000)这里的回调函数是show()，在满足时间5秒后执行异步操作同步操作在主线程上排队执行,只有将上一个任务执行完后,才能进行下一步操作.异步任务不进入主线程，而是进入异步队列，前一个任务是否执行完毕不影响下一

2022-02-20 21:34:30 192

原创防抖与节流（debounce & throttle）

防抖防抖是指当一个事件被触发时，设定一个延时时间去执行，如果在这个延时时间内又再次触发此事件，则重新开始设定延时时间去执行例如：重复点击按钮发送 ajax 请求，可以通过防抖去避免重复发送请求 let time = null btn.onclick = function () { clearTimeout(time) time = setTimeout(() => { conso

2022-01-07 22:27:26 596

原创 splice、slice、split和join

核心slice：截取功能截取数组为主，也可以截取字符串返回新的数组，包含截取的元素不改变原数组splice：数组增删查改只能对数组增删查改，字符串无效返回新的数组，内容是被删除的元素会改变原数组spli：字符串 => 数组字符串的方法，不是数组的方法返回一个字符串数组join：数组 => 字符串1. slice（）从数组中截取任意个元素，返回结果为新的数组不改变原数组const arr = ['a', 'b', 'c', 'd', 'e',

2021-10-31 21:32:03 737

原创前端常用的几个代码片段

1. 获取文件后缀名export function getExt(filename) { if (typeof filename == 'string') { // 如果文件没有后缀名，返回null if(!filename.includes('.')){return null} return filename .split('.') .pop() .toLowerCase()

2021-10-07 21:27:53 400

原创 React-grid-layout的使用

简介React-grid-layout 是一个网格布局系统，可以实现响应式的网格布局，灵活运用可以方便的实现拖拽式组件的实现用法基本用法import GridLayout from 'react-grid-layout';class MyFirstGrid extends React.Component { render() { // layout is an array of objects, see the demo for more complete usage con

2021-08-31 22:10:21 3581

原创 React基础

React基础1.函数式组件（无状态(state)组件）写法const App = (props) => { return <div>我是函数式组件</div>}export default App*组件名必须大写，否则报错props*props可以接收绑定在函数式组价身上的属性2. class组件写法import React,{Component} from 'react'class App extends Component { rende

2021-06-01 01:12:15 70

weixin_48845614的博客

原创在 Window下调试 ios 的 Safari 浏览器

原创 Shopify开发之Liquid对象

原创 Shopify开发之数组过滤器

原创 Shopify开发之变量标签

原创 Shopify开发之运算符和数据类型

原创 Shopify开发之目录结构

原创 antd table 拖拽排序的问题

原创在 Umi 中打包与加载自定义字体

原创 gsap.to, gsap.from, gsap.formTo 的基本使用

原创前端 WebSocket 的使用

原创 js中常见的几种递归用法

原创使用Node.js搭建自己的脚手架

原创 React.memo、useMemo和useCallback