- 博客(28)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 react hook 源码解析
<html><head></head><body></body><script> let isMount = true; //判断组件是mount还是update let workInProgressHook = null; //链接链表的hook // 每个组件对应一个fiber const fiber = { stateNode: App, //保存对应的组件 .
2022-02-10 15:57:58
670
原创 js 堆。
////////堆heap//////////////堆是一种特殊的完全二叉树，最大（小）堆：所有节点都小（大）于等于子节点//最小堆class MinHeap { constructor() { this.heap = []; } // 获取父节点 getParentIndex(i) { return Math.floor((i - 1) / 2); // return (i - 1) >> 1; } // 获取左节点 getLef.
2021-07-22 18:32:41
160
原创 react createContext, useReducer 代替redux
Main.tsximport React, { createContext, useReducer } from 'react';import { Container, TopWrap, MiddleWrap } from './style';import { Detail } from '../Detail';export const DetailContext = createContext<any>({});const reducer = (state, action).
2021-06-24 16:48:04
196
原创 js滚动加载
import React, { memo, useRef, useState } from 'react';const Config_ = props => { const [list, setList] = useState<any[]>([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); const { info, inputChange, curItem } = props; const myRef = useRef<HTMLUListEleme.
2021-06-23 14:13:35
85
原创 图片懒加载
<!DOCTYPE html><html> <head></head> <body> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>11.
2021-06-16 16:46:52
68
原创 canvas
import React, { memo, useEffect, useState, useRef } from 'react';import { Button, message, Spin, Row, Col, Table, Radio, Upload } from 'antd';// 图片水平垂直居中const Ocr_ = () => { const [isDraw, setIsDraw] = useState<boolean>(false); const [loc.
2021-05-13 17:58:03
212
原创 react hooks的坑
1.大部分由闭包引起的坑。function App() { const [state, setState] = React.useState(0) // 连点三次答案会是什么？ const handleClick = () => { setState(state + 1) setTimeout(() => { console.log(state) }, 1000) } return ( <> <d.
2021-04-23 10:09:15
238
原创 npm qs的使用
主要包括: qs.stringify()、qs.parse()import qs from 'qs';let obj = { a: 'aaa', b: 'bbb', c: 'ccc', }; console.log(qs.stringify(obj)); // a=aaa&b=bbb&c=ccc let arr = [1, 2]; console.log(qs.stringify({ bb: arr })); // 'bb[0]=1&
2021-04-09 16:37:36
2952
原创 react hooks useReducer
import React, { useReducer, memo } from 'react';const initialState = 0;function reducer(state, action) { switch (action.type) { case 'reset': return { count: initialState }; case 'increment': return { count: state.count + 1 }; .
2021-03-25 07:53:55
78
原创 前端eslint + prettier代码格式化
vscode安装插件eslint，prettier 安装相关依赖 项目采用JavaScript strandard， react/recommended, react-hooks/recommend规则，代码格式采用prettier 设置自动修复，保存自动格式化 代码格式在prettier推荐规则上做了少许定制 lint-staged 代码提交前校验，避免把校验未通过或未解决冲突的代码提交到版本库 ...
2021-02-19 15:04:03
174
原创 react hooks父组件通过useContext向子组件传值
公共文件createContext.jsimport { createContext } from "react";const myContext = createContext(null);export default myContext;父组件import React, { useState} from "react";import Counter from './Counter'import myContext from './createContext'functio..
2020-12-23 11:04:46
287
原创 js简单算法
数组去重const arr = [1, 1, 2, 3, 4, 7, 5, 6, 3, 4, 1];const newArr = Array.from(new Set(arr)); const newArr1 = [];arr.forEach((item) => { if (newArr1.indexOf(item) === -1) { newArr1.push(item); } });找出字符串中出现次数最多的字符const str = ..
2020-12-22 17:21:57
89
原创 h5复制文本
1、函数复制形式（不支持复制格式）import copy from 'copy-to-clipboard';if(copy("http://baidu.com")){ console.log("复制成功");}else{ console.log("复制失败")}2、react组件复制形式（支持复制格式）import ReactDOM from 'react-dom'import React, { Component } from 'react'import C...
2020-12-04 17:58:53
249
原创 js 更改对象属性名
var obj = [ { "name":"zhangsan", "age":20 }, { "name":"lisi", "age":22 }]var newObj = JSON.parse(JSON.stringify(obj).replace(/name/g, 'title'))如果value和key同名，有问题可以使用遍历obj.forEach(item=>{ item ...
2020-09-16 10:02:04
1722
原创 react使用antd upload上传图片
<Uploadaction="/caizhi_mkto/api/applet/file/upload.do"fileList={[]}data={{bizKey:"morningpaper"}} // action 中的附件参数onSuccess={this.onSuccess}...
2020-09-15 15:59:14
1993
原创 js判断字符串是否包含特殊字符
check = (str) => { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]") if (pattern.test(str)){ return true } return false}...
2020-08-03 09:54:30
3540
原创 前端实现csv文件类型下载
添加请求拦截axios.interceptors.response.use(response => { if (response.headers['content-type'] === 'application/csv;charset=UTF-8') { return response }) 通过请求获取数据源后 // 导出文件 exportFile = (res, name) => { const blob = new window.Blob(...
2020-07-23 16:26:05
1389
原创 react总结
React是一个构建用户界面的JavaScript库，主要负责构建UI，起源于FaceBook的内部项目React拥有很好的性能，代码逻辑简单，将界面拆分为多个小的组件。React设计特点1.通过设计虚拟DOM节点，最大限度地减少与DOM的交互。2.JSX是作为JavaScript语法的扩展，可以在html中添加JS语法。3.通过React组件化构建，使得代码更容易复用，能够很...
2018-09-08 14:25:56
163
原创 ES6学习总结
1.let 和 cons t命令let 命令ES6新增了let命令用来声明变量，其作用类似于var，所声明的变量只在let命令所在的代码块内有效。var命令存在“变量提升”现象，即变量可以在声明之前使用，值为undefined，而let不存在变量提升，在声明之前使用该变量就会报错ReferenceError。暂时性死区只要块级作用域内存在let命令，它所声明的变量就“绑定”...
2018-09-08 14:25:29
155
原创 git的基本使用方法
git的基本使用方法什么是git？git是目前世界上最先进的分布式版本控制系统。git与SVN的最主要区别？SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而工作的时候用的都是自己的电脑，所以开始工作之前需要从中央服务器那里获取最新的版本，然后开始工作，工作完后，需要把自己所做的工作推送到中央服务器。集中式版本控制系统必须要联网才能工作，如果在局域网中，有足够的宽带，运行速度...
2018-09-05 11:07:55
54467
12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人