react
我是一个粉刷匠呀
这个作者很懒,什么都没留下…
展开
-
react函数组件使用Input写搜索框的防抖--Zarm
原创 2021-11-11 11:26:20 · 1112 阅读 · 1 评论 -
使用react-pdf-js插件实现pdf在线预览(兼容性良好)
1.下载包 yarn add react-pdf-js 2.使用 import PDF from 'react-pdf-js'; const [page, setPage] = useState(1); //pdf当前页数 const [pageTotal, setPageTotal] = useState(0); //pdf总页数 const onDocumentComplete = (pages) => { setPage(1); setPageTotal(pages);原创 2021-09-01 19:28:52 · 3897 阅读 · 3 评论 -
react 禁止h5在真机运行可双手放大
document.documentElement.addEventListener( 'touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, { passive: false, }, );原创 2021-08-30 15:16:49 · 403 阅读 · 0 评论 -
react 使用iframe预览pdf文档(存在兼容性问题)
<iframe src={pdfUrl + '#toolbar=0'}//url后加上的内容可隐藏顶部的下载等选项 width="100%" height="100%" frameBorder={0}//边框设置 scrolling="no"//滚动设置 ></iframe>原创 2021-08-30 15:15:21 · 1292 阅读 · 0 评论 -
移动端react-hooks+TS上拉距离顶部一定距离时 改变页面样式
const stickyRef = useRef() //创建一个ref <div ref={stickyRef}></div> //关联ref const [sticky, setSticky] = useState(true); //判断是否固定 通过sticky更换样式 const onScroll = () => { const top = stickyRef.current!.getBoundingClientRect() //获取元素距离顶原创 2021-08-27 15:38:08 · 523 阅读 · 0 评论 -
前端移动端实现拨打电话功能
<a href="tel:0755-95518">拨打</a> 会调起手机的拨号盘原创 2021-08-27 14:10:41 · 1066 阅读 · 0 评论 -
H5前端利用JS实现复制功能(解决ios兼容问题)
const ele = document.getElementsByClassName(key)[0] as HTMLElement; const strs0 = ele?.innerText; //获取要复制的内容 let textBox = document.createElement('input'); textBox.value = strs0; document.body.appendChild(textBox); textBox.sele...原创 2021-08-27 14:06:50 · 498 阅读 · 0 评论 -
React解决组件无用渲染问题--函数组件--React.memo()
React.memo(…)是React v16.6引进来的新属性。它的作用和React.PureComponent类似,是用来控制函数组件的重新渲染的。React.memo(…) 其实就是函数组件的React.PureComponent。 1.创建一个函数组件 import React from 'react'; const Com = (props) =>{ return ( <div>{props.count}</div> ) } export default原创 2021-08-11 15:32:44 · 588 阅读 · 0 评论 -
React解决组件无用渲染问题--类组件--PureComponent
(理论)React在进行组件更新时,如果发现这个组件是一个PureComponent,它会将组件现在的state和props和其下一个state和props进行浅比较,如果它们的值没有变化,就不会进行更新。 1.创建一个类组件 import React from 'react'; class Com extends React.Component { constructor(props){ super(props); this.state={ count: 0 } } rende原创 2021-08-11 15:22:13 · 266 阅读 · 0 评论 -
React解决组件无用渲染问题--类组件--shouldComponentUpdate
1.先来创建一个类组件 import React from 'react'; class Com extends React.Component { constructor(props){ super(props); this.state={ count: 0 } } render(){ return ( <div> <span>{this.state.count}</span> <button onClick=原创 2021-08-11 15:16:26 · 367 阅读 · 0 评论