weixin_42215167的博客

原创 react函数组件使用Input写搜索框的防抖--Zarm

原创 使用react-pdf-js插件实现pdf在线预览（兼容性良好）

1.下载包yarn add react-pdf-js2.使用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);

原创 react 禁止h5在真机运行可双手放大

document.documentElement.addEventListener( 'touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, { passive: false, }, );

原创 react 使用iframe预览pdf文档（存在兼容性问题）

<iframe src={pdfUrl + '#toolbar=0'}//url后加上的内容可隐藏顶部的下载等选项 width="100%" height="100%" frameBorder={0}//边框设置 scrolling="no"//滚动设置></iframe>

原创 移动端react-hooks+TS上拉距离顶部一定距离时 改变页面样式

const stickyRef = useRef() //创建一个ref<div ref={stickyRef}></div> //关联refconst [sticky, setSticky] = useState(true); //判断是否固定 通过sticky更换样式const onScroll = () => { const top = stickyRef.current!.getBoundingClientRect() //获取元素距离顶

原创 前端移动端实现拨打电话功能

<a href="tel:0755-95518">拨打</a>会调起手机的拨号盘

原创 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...

原创 CSS实现固定宽度内文字左右等距排列

达到如图效果.left { color: rgba(153, 153, 153, 100); font-size: 14px; width: 56px;//笃定宽度 text-align: justify; &::after { content: ''; display: inline-block; width: 100%;.

原创 前端移动端开发隐藏右侧滚动条

:global { ::-webkit-scrollbar { display: none; }}

原创 Windows系统Python环境搭建详细步骤

1.python官网2.下载步骤

原创 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

原创 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

原创 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=

原创 history方法的传值与取值

传值history.push( pathname: url + id, query: { type: 'test' }, state: { ...obj })取值pathname传值通过this.props.paramsquery传值通过this.props.location.querystate传值通过this.props.location.state

原创 react-redux实现流程

用户发送action给storestore.dispatch(action)store接受action,就会触发reducer,传入两个参数,分别是当前的state和传来的action,返回新的statelet newState = redcer函数(当前state,action)state一旦发生变化，就会触发store的subscribe监听函数store.subscribe(listener)listener可以通过store.getState()来获取当前state,.

原创 Redux的store.subscribe()监听

import createStore from 'Redux'const { store } = createStore(reducer)store.subscribe(放上view的更新函数)//对于React 则是render和setState此后 更新函数的每一次变化都会触发view的重新自动渲染

原创 Redux的Reducer详解

场景store接受到action后，需要返回一个新的state,这样view才会更新介绍Reducer是一个函数，他接受当前的state和action，返回新的state// action 形如 {type:'add',payload:'其他信息'}const reducer = function(state,action){ return 新的state}应用实际应用中，store.dispatch 会触发reducer的自动执行 需要绑定import { crea..

原创 Redux的state,store,action详解

store即保存数据的容器，一个应用只能有一个store通过Redux的createStore生成const store = Redux.createStore(fn)// 接受另一个函数 返回新生成的store对象state对象包含所有数据，通过store.getState拿到当时刻的数据const store = Redux.createStore(fn)const state = store.getState()注： State变化 View变化 但用户只能看到v.

原创 React-Hooks的useReducer()钩子

基本使用const [state, dispatch] = useReducer(reducer, initialState)// useReducer接受reducer函数和状态的初始值作为参数，返回一个数组，数组第一个元素是状态的当前值，数组的第二个元素是发送action的dispatch函数举例：const [state, dispatch] = useReducer(reducer, {value : 0})<button onClick={()=> dispatch({t

原创 React-Hooks的useContext()共享状态钩子使用与实现

例：需要在ComponentOne和ComponentTwo中共享父组件的状态// 两个子组件共享父组件状态<div> <ComponentOne/> <ComponentTwo/></div>// 使用 React Context API，在组件外部建立一个 Contextconst AppContext = React.createContext()// 使用AppContext.Provider提供的Context对象，这

原创 强类型与弱类型

判断机制:根据是否进行隐式类型转换强类型 ts jsconsole.log(1 + '1'); //ts js都会进行隐式类型转换 最后打印出来 11强类型 pythonprint(1 + '1'); //报错

原创 静态类型与动态类型

静态类型以ts为例，如果有语法类型错误，会在编译时就报错let bool: boolean = trueconsole.log(bool.split());//会报错动态类型以js为例，没有编译阶段，如果有语法类型错误，会在运行时报错影响线上...

原创 解决react项目结合Ant-Design的Tabs组件时，tab切换不刷新导致数据不同步更新的问题

场景介绍两个tab，一个已接受，一个已拒绝，在已接受中可以进行拒绝操作，拒绝后在已拒绝tab中会展示刚刚拒绝的那条数据。问题：拒绝后点击展示已拒绝tab,发现并没有更新 <Tabs defaultActiveKey={currentKey} onChange={this.onTabChange}> { tabs.map((item) => ( <Tabs.TabPane tab={item.title} ke

原创 react中的history（push,go,replace）切换路由方法的区别

1.history.pushhistory.push方法更改当前路由，会向当前路由栈里面添加一条新的记录，跳转后点击回退可回退到当前页面2.history.replacehistory.replace方法更改当前路由，不会向当前路由栈里面添加一条新的记录，跳转后点击回退不可回退到当前页面，与他的名字一样，是直接替换当前路由3.history.gohistory.go方法与window.history.go()类似，参数为整数，表示向前或向后跳转...

原创 TS--从0开始 （六、面向对象编程-1）

类1、class关键字class Simple { // 用class创建一个类}// 使用new实例化let simple = new Simple()2、构造函数 constructorclass Simple { // 构造函数 constructor() { } // 通常情况下，会把一个类实例化的时候的初始化相关代码写在构造函数constructor中，比如初始化赋值}let simple = new Simple()注：默

原创 TS--从0开始 （五、函数深入）

一、函数的标注function fun(a: string): string { return ''}let fun: (a: string) => string = function (a: string): string { return ''}// 或者可省略不写let fun: (a: string) => string = function (a) { return ''}// 使用typetype callback = (a: str

原创 TS--从0开始 （四、高级类型）

一、联合类型function cssChange(ele: HTMLElement, attr: string, value: number | string): void { //此处的number|string表示value可以为number类型也可以为string类型}let ele = document.getElementsByTagName('div')[0]cssChange(ele, 'width', '100px')cssChange(ele, 'opacity'

原创 TS--从0开始 （三、接口深入-2）

使用接口描述函数不使用接口时 无法复用function fun1(x: number, y: number): number { return x + y}function fun2(x: number, y: number): number { return x + y}//无法复用使用后interface Func { (x: number, y: number): number}// 使用接口描述函数Func可复用let fun1: Func =

原创 TS--从0开始 （三、接口深入-1）

本章主要为接口中一些属性先来一个接口interface Abs { a: number, b: number}let obj: Abs = { a: 100, b: 109}一、可选属性interface Abs { a: number, b: number, c?: string //可选属性 意味着该接口的c可为string或undefined}let obj: Abs = { a: 100, b: 1

原创 TS--从0开始（二、TS类型基础）

TS类型一、基础类型1.数字 numberlet num: number = 562.字符串 stringlet str: string = '字符串'3.布尔值 booleanlet isOk: boolean = true二、空和未定义注意：这两种类型有且只有一个值，所以在标注一个变量为null或undefined时，就表示这个变量不能被修改了1.空 nulllet data1: null = null;2.未定义 undefinedlet data2: undefi

原创 TS--从0开始（一、学习前准备）

TS–入门级教程1. 安装环境（官网下载）node + vs-code + git(没有也行)2. typescript配置1.使用npm 下载typescript包npm i -g typescript2.安装成功后检测tsc版本(如打印tsc版本则成功)tsc -v3. 创建自己的第一个ts文件1.空白目录新建文件夹，文件夹下创建src目录，src目录下创建第一个ts文件 ---- 01.tslet str: string = '第一个ts文件'2.创建新终端

原创 文件导出(文件流)---js-file-download插件

文件下载（文件流）—js-file-download//下载插件npm install js-file-download --save//引入插件import fileDownload from 'js-file-download'//使用fileDownload(res,'文件名.后缀')//后缀需要与后端确定 res为后端返回的文件流...

原创 文件导出(文件流)---使用blob

文件导出(文件流)—使用bloblet res = {}//这里假设res为后台返回的文件流（看不懂）//使用bloblet blob = new Blob([res], { type: 'xls' })//这里的type为文件类型 需要与后端确认（一定要确认）const fileName = '文件名.xls'//注意后缀要与type一致const alink = document.createElement('a')//创建一个a标签alink.download = fileNamea

原创 react结合ant-design的Upload组件--formData文件上传

react结合ant-design的Upload组件–formData文件上传导入import { Upload } from 'antd'; render中使用<Upload accept=".jpg,.gif,.png" listType="picture-card" customRequest={onImgFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现 showUploadList={false}> &