犹如幻翳！-CSDN博客

原创关于data-*的React使用和调用及常遇到的问题

关于data-*的React使用和调用及常遇到的问题Js常规使用关于一级命名，二级命名及写法data属性命名拼写为小写，不必使用驼峰命名，二级命名属性名自动解析为驼峰命名，如singleId,但是属名命名为驼峰，取值为undefined(dataset解析为thirdid,所以取不到)<body> <div data-id='1' id="test1"></div> <div data-single-id='2' id="test2"&

2021-07-12 22:00:35 1159 1

原创路由demo&&深入了解【以防忘记】

路由demo&&深入了解【以防忘记】常见问题一：this.props中history、location、match丢失问题withRouter的作用：将react-router的 history、location、match 三个对象传入props对象上默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(’/detail’)跳转到对应路由的页面然而不是所有组件都直接与路由相连（

2021-07-01 00:29:56 147

原创 webpack

webpack目录别名配置aliasentry输入支持字符换，对象，数组的类型单文件引入//字符串类型module.export{ entry:'./src.index.tsx'}//对象类型module.exports={ entry:{ main:'./src.index.tsx'}//数组类型 /** 无论哪种类型，实际上只有一个入口，字符串直接解析 string[]类型，会自动生成一个入口模块，指定模块全部加载，最后一个作为入口module.exp

2021-07-01 00:26:22 146

原创 oss直传

oss直传this.file = new Map() //此处是用来存储数据function upLoad(options, props) { const { file, onSuccess, onError, onProgress } = options const { fileSizeLimit, useInMonitor, onCallback } = props || {} const abort = () => {} //终止请求 //第一步：查看文件是否限制，使用

2021-07-01 00:19:46 264

原创关于antd自定义icon的方法

关于antd自定义icon的方法第一步：资源管理->新建项目->把需要的图标添加到项目库->使用symbol生成js在线链接(如上)第二部：引入在线链接import { Icon } from 'antd';const IconFont = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', //引入在线链接});ReactDOM.render( &

2021-07-01 00:17:30 3714 2

原创 fetch(get,post)封装[非mtop接口时使用]

fetch(get,post)封装[非mtop接口时使用] ????httpAjax.js

2021-07-01 00:16:10 70

原创数组巧解`

数组巧解一：从一个数组中删除另一个数组包含的相同对象let arr1= [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]let arr2= [{ id: 1 }, { id: 2 }, { id: 3 }]arr1= arr1.filter(item => {let idList= arr2.map(v => v.id)return !idList.includes(item.id)})console.log(arr

2021-07-01 00:15:17 67

原创 antd(4.x)Modal结合form的复合使用

antd(4.x)Modal结合form的复合使用效果展示：保留Modal的底部按钮实现功能：通过Modal自带的onOk和onCancel来受控Form表单的校验required时onOk校验必传输入框创建时props传Modal-title并清空输入框编辑时props传Modal-title并传入初始值代码实现：modal+form（antd4modal+form只能以函数形式呈现）export interface ITagModal { tagVis: boolea

2021-07-01 00:13:41 1294

原创 useToggle组件封装

useToggle组件封装只针对对Boolean之间的切换，简洁直观import { useState } from 'react';const useToggle = (initialState:boolean = false) => { const [toggle, setToggle] = useState(initialState); const switchToogle: any = () => { setToggle(!toggle);

2021-07-01 00:07:07 666

原创 Typescript引入ref的注意事项

Typescript引入ref的注意事项//Jsx的类组件使用ref两种方式： //第一种 { constructor() {//第一步注册 super() this.ref = React.createRef()//用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，用ref的current属性来获取节点或示例 } componentDidMount() {

2021-07-01 00:04:22 1251

原创 Typescript结合form表单使用时怎么同时继承父组件this.props和form的this.props.form

Typescript结合form表单使用时怎么同时继承父组件this.props和form的this.props.form正常的JS中使用如下：import { Form } from 'antd';const FormItem = Form.Item;...//CustomedForm类组件中使用render(){ const { getFieldDecorator } = this.props.form;//正常引入getFieldDecorator return(

2021-07-01 00:01:32 603

原创关于划字逻辑的文档

关于划字逻辑的文档背景：左侧文章滑动需关联右侧问题，右侧点击左侧定位(左右交互的时候都需要加样式)代码实现方法：//第一步：二级事件监听 componentDidMount() { //根据id获取文章详情页 this.left.current && this.left.current.addEventListener("click", (e) => { this.setState( {

2021-06-30 23:55:22 63

原创 react 中 EventEmitter 事件总线机制

react 中 EventEmitter 事件总线机制一：创建事件总线//添加事件总线import {EventEmitter} from 'events';export default new EventEmitter();二：监听事件并移除事件总线//监听事件总线import eventBus from '../common/events'; React.useEffect(() => { eventBus.on(EventName.titleChange, titleC

2021-06-30 23:50:31 1897

原创 Antd-upload控制文件显示位置

Antd-upload控制文件显示位置思路：使用两个upLoad来控制文件，第一个文件用来控制fileList受控；第二个文件用来控制文件展示位置，类似起到div的作用，只用于渲染。

2021-06-30 23:46:07 614

原创 React哲学

React哲学一：UI组件层级划分单一功能原则由外到内拆分为5个组件，关系如下FilterableProductTableSearchBarProductTableProductCategoryRowProductRow二：创建一个静态版本注意：最好将渲染 UI 和添加交互这两个过程分开。三：确定 UI state 的最小（且完整）表示1.该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。2.该数据是否随时间的推移而保持

2021-06-30 23:43:21 51

原创何时使用 useCallback 与 useMemo

何时使用 useCallback 与 useMemo前言React 中有许多性能优化的手段，useMemo 与 useCallback 是 hooks 推行后最为常用的两种方法，但是任何优化方案都是有成本的，如果组件都套上 useCallback、Memo，不仅代码可读性会变差，反而会增加性能消耗，还会因为参数的传递问题产生非预期的 bug。不是不推荐使用，必要时用可以达到更好的效果。useCallback（同useEffect一样，根据[]是否变化来决定是否渲染）// a, b 参数不变时，mem

2021-06-30 23:38:09 284

原创 XMLHttpRequest

XMLHttpRequestXMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。XMLHttpRequest()初始化一个新的XMLHttpRequest对象const request = new XMLHttpRequest();//生成一个新的对象返回值：该对象必须至少通过调用op

2021-06-30 23:27:28 1703

原创前端面试题全方位总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言前端基础题ReactHTMLHTML属性HTML语义化等CSS盒子模型文字排版选择器属性CSSOMJS基础JS类型相关问题语法异步实现浏览器原生DOM操作事件网络1. Restful2.怎么解决跨域问题3.fetch和ajax有什么不同4. script标签中的async和defer的区别5. cookie属性6.ajax原理7.ajax的readySate有几个状态?缓存1. 强缓存和协商缓存的区别2. F5和ctrl+F5的

2021-06-22 02:00:24 539

原创面试宝典

react之setState同步异步问题四种状态下的setState的机制 transaction的原理及源码

2021-05-08 23:00:58 49

原创 JS中关于轮播图的制作

这是轮播图显示的效果图，点击下面的按钮会显示相应的图片，下面代码会只贴出来js部分，css样式看个人发挥去写。关于轮播图，重要的是在临界值的思考上。再js中我放了4张图片，最后一张和第一张一样。当走完图片，此时应该判断是否切换成第二张，因为第一张在最后一张显示过了。并且同时设ul的偏移量归0，否则切换成第二张会有拉回开的感觉，有违和感。具体见代码。关于下面小圆点有两点：1：先清除所有再添加的思想。2：当显示第4张时设置小圆点为1，同第一张一样。下面时小圆点的部分设置代码，防止只看js看不懂。 #nu

2020-08-09 11:04:55 640

zw686668的博客