- 博客(282)
- 收藏
- 关注
RSS订阅原创 flex:1给了我工作机会
今天就跟大家讲讲flex：1是什么的缩写，怎么去理解这个样式。首先要知道flex:1就是的缩写，首页要理解它们的作用，先看dom解构做项目时先看flex-basic。
2024-04-25 18:17:44
109
原创 mysql server 和mysql workBench的安装
选择性安装，只需安装server 和workBench,其中server是数据库，workBench是数据库的可视化。
2024-03-11 14:32:07
173
原创 forwardRef和useImperativeHandle的配合使用
useImperativeHandle往外暴露子组件的方法，注意useImperativeHandle第三个参数中括号依赖，有这个依赖，childFun才能获取到最新的值。通过ref调用子组件里的方法。
2024-03-07 17:52:59
192
原创 script的defer和async的理解
加了defer，结果跟场景一一样，所以defer对script标签内的代码不期待延迟执行的作用。script标签没有defer属性，不敢是不是通过src引入代码，结果一样。加了defer，获取到了div元素。js阻碍了dom元素的渲染。
2024-03-07 13:51:15
194
原创 typescript,eslint,prettier的引入
最后在tsconfig.json添加includes配置项，在该配置项中的目录下，所有的d.ts中的类型可以在这些目录下的其他文件引用。然后再tsc --init生成tsconfig.json配置文件，这个文件在package.json同级目录下。首先用npm安装typescript，cnpm i typescript。ts文件和d.ts文件都包含在src中。
2024-01-01 16:26:03
537
原创 umi预渲染
umi官网有预渲染，但是，是基于服务端渲染的，如果服务端渲染实现不了，那预渲染别谈，即使可以，但也不能指定路由渲染指定页面。在执行yarn build之后就可以渲染出about/indext.html页面。下面采用插件的形式实现。
2022-09-29 10:59:37
582
原创 umi2.x安装包有问题ERROR in ./node_modules/@ant-design/icons/es/icons/LoadingOutlined.js Module not found:
通过yarn create @umijs/umi-app创建的umi项目，在yarn安装完依赖包之后报了上图错误。
2022-09-10 16:25:43
975
原创 umi配置实战
注意.umirc.local.ts是运行时配置，也就是在开发的时候使用的配置，在yarn build打包的时候，.umirc.local.ts里的配置是不生效的。1.yarn add eslint安装以来；1.在package.json中配置"webpack": “umi webpack”这是链式配置，想要查看配置是否正确，依旧执行yarn webpack查看配置结果。2.在命令行中输入yarn webpack，ctrl+f查看你配置的内容。子路由也是在routes中配置，子组件通过props获取。....
2022-08-23 14:03:21
349
原创 更新为win11后没有git bash
在shell中新建项git bash,在git bash中新建项command，双击右边窗口中的“默认”，填上git-bash.exe的路径，这时，打开任意文件夹，右键=》显示更多选项，就可以看到git bash,如果想要在任意文件夹中点击右键就可以直接看到git bash，如下。输入reg.exe add “HKCU\Software\Classes\CLSID{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32” /f /ve;...
2022-08-16 16:30:07
1013
原创 create react app怎么配置webpack
其中，style-resources-loader是支持less全局变量或者全局函数的，为了混入公共样式用的，mixins文件如下，自己可以封装一些公共less函数，供整个项目使用。执行命令npmruneject，把项目的webpack配置弹出来，执行完命令生成了以下文件。这样就可以自行配置webpack了。......
2022-07-27 16:19:25
1478
原创 svg弧线文本弧形文字
先看效果上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0; } text { font-size: 30px;
2022-05-22 13:43:00
821
原创 info There appears to be trouble with your network connection. Retrying...
用yarn下载依赖包的时候报错info There appears to be trouble with your network connection. Retrying...这个问题折腾了我一整天，网上有人说是镜像问题（用yarn config set registry https://registry.npm.taobao.org配置淘宝镜像），也有人说是权限问题（在win+x中用window powershell用管理员身份下载yarn），经过各种尝试,好多博主的方法都解决不了。自己用npm也
2022-03-15 12:52:56
2533
原创 js双等号==和三等号===
基本数据类型const a = 'malinshu'const b = 'malinshu'a === b // truea==b //trueconst num1 = 111const num2 = 111num1 == num2 // truenum1 === num2 // trueconst b1 = trueconst b2 = trueb1 == b2 // trueb1 === b2 // truenull === undefined //falsenull
2022-02-18 11:14:34
432
原创 chromedriver谷歌驱动与谷歌浏览器版本不匹配的问题自动化webdriver驱动
驱动下载地址：http://chromedriver.storage.googleapis.com/index.html下载完后放到系统盘（一般是C盘）下：
2022-01-16 16:27:14
875
原创 useRef和createRef的区别
function App() { const [num, setNum] = useState(0) const uRef = useRef() const cRef = createRef() const btnClk = () => { setNum((num) => num + 1) } useEffect(() => { uRef.current.value = num cRef.current.value = num con
2021-08-18 22:28:18
1741
原创 requestAnimationFrame无限循环pk定时器
requestAnimationFrame到底比起定时器来说有什么样的优势，大家不妨网上查阅一番，在次之前做个实践，定将大有收益，请看以下内容：let num = 0const run = () => { console.log('run') if (num % 60 === 0) { console.log(new Date()) } num += 1 requestAnimationFrame(run)}requestAnimationFrame(run)
2021-08-17 22:27:59
235
原创 react ref获取子组件中的input元素
function App(){ const myref = React.createRef() const Comp = React.forwardRef((props, ref) => (<div> <input ref={ref}/> </div>)) useEffect(() => { console.log(myref.current.value = 'malinshu') }, []) return(
2021-07-28 15:00:52
318
原创 input输入框默认背景
在chrome浏览器自动输入时，input就会有背景，字体大小和颜色都会变化，怎么解决？input:-webkit-autofill { transition: background-color 2000s;}input { -webkit-text-fill-color: #fff; caret-color:#fff;}
2021-07-22 19:28:11
546
原创 react-router-dom的基本使用
one和two是子路由import { BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";<Router> <ul> <li> <Link to="/">Home</Link> </li> <li> .
2021-07-06 17:53:59
134
原创 selenium webdriver怎么自动化操作已经打开的浏览器
为了满足这个需求我可是拜访了度娘好几个小时，也找不到满意的答案，刚才问了测试的朋友怎么实现，一下子有了答案，在此总结一下步骤1、首先在命令行中输入以下命令：chrome.exe --remote-debugging-port=9948 --user-data-dir=“D:\TestPy”其中端口9948已有的任意一个端口，可以在任务管理器里面找（ctrl+shift+esc）这时会在D:\TestPy中生成一系列文件（在这之前别忘了在环境变量中PATH里将chrome的路径添加进去，我的环
2021-07-04 16:48:03
1573
原创 CreateProcess error=2, 系统找不到指定的文件 pycharm运行错误
选择正确的选项，让python interpreter的路径为python x.x，然后点击ok保存就可以了
2021-07-03 23:15:57
1723
原创 react hook useCallback的使用
首先探索下useCallback是什么const callback = useCallback(() => { console.log('依赖只有count') }, [count]); <button onClick={() => console.log(callback)}> what is callback</button>当点击按钮的时候，控制台打印了一下内容由此看出，常量callback的值就是一个函数，函数里面的代码就是我们写在u.
2021-07-03 21:22:09
675
1
原创 react useContext跨层级组件传值
父组件import ContextComp,{TestContext} from './components/ContextComp'function App(){ const showName = (name) => { console.log(name) } const ItemComp = () => { const {name} = React.useContext(TestContext) return <div onClick={().
2021-06-21 17:49:43
394
3
原创 async await等待的是不是promise的区别
场景一const waitForYou = () => { return new Promise((resolve,reject)=>{ resolve(1) }) } const trigger = async () => { let res = await waitForYou() console.log('执行了吗', res) } return ( <div className="App">
2021-06-20 11:00:23
762
原创 mobx computed
场景一@observable person = { name:'malinshu', high:180}@action setName = (value) => { this.person.name = value}@computed get getHigh(){ let {high} = this.person console.log(high) return high}<input onChange={(e) => { m
2021-06-20 10:45:56
655
原创 最全的react-json-view用法
let my_important_json = { name:'malinshu', tall:171, other:{ pant:true, arr:[1,2,3,4] } }<ReactJson collapsed={false}//是否收起,true为收起 indentWidth={10}//缩进 iconStyle='circle' src={my_important_json}.
2021-05-24 13:52:18
3713
1
原创 react函数组件的生命周期
import { useEffect } from 'react'function FunComponent() { useEffect(()=>{ return ()=>{ console.log("WillUnmount") } }) useEffect(()=>{ console.log("DidMount") },[]) return ( <d
2021-05-09 18:13:43
5044
原创 TypeError: Cannot read property ‘location‘ of undefined react-router-dom报错
import {Route, BrowserRouter, Link} from ‘react-router-dom’<BrowserRouter> <Link to='/fun'>fun</Link> <Link to='/import'>import</Link> <Route path="/fun" component={FunComponent}/>
2021-05-09 17:56:32
608
原创 react中useState的使用
import { useState } from 'react'function FunComponent() { const [man, setMan] = useState({ name: 'malinshu', tall: 180 }) const setName1 = () => { setMan({ name: 'ma' }) console.log(man)//{name: "malinshu", tall: 180}页面更新成了{ nam
2021-05-09 16:55:34
1151
原创 mobx在react中引用的几种方式
先看效果，类似于vue的双向绑定方式一（inject方式）：import {Provider} from 'mobx-react'import mobxStore from './store/testStore'import ByInject from './components/byInject'function App() { return ( <div className="App"> <Provider receiverStore={mobxSt
2021-05-09 00:13:21
812
2
原创 一维数组转为多维，用于tree树形组件
filterArray = (list, parentId) => { var tree = []; var temp; for (var i = 0; i < list.length; i++) { if (list[i].pid === parentId) { var obj = list[i]; temp = this.filterArray(list, list[i].id); if (temp.leng
2021-04-25 13:16:43
160
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人