- 博客(13)
- 收藏
- 关注
RSS订阅
原创 react路由拦截
import React from ‘react’import { Route, withRouter } from ‘react-router-dom’/**统一路由监听登录后不做任何处理 未登录跳转到登录页*/export default @withRouterclass extends React.PureComponent {constructor (props) {super(props)this.redirect(props)}// nextPropscompone
2020-12-21 18:29:18
316
原创 瀑布流和下拉加载
import React from ‘react’import Masonry from ‘masonry-layout’import InfiniteScroll from ‘react-infinite-scroller’import imagesLoaded from ‘imagesloaded’import axios from ‘axios’import ‘./styles.less’const arr = [‘https://dss1.bdstatic.com/70cFuXSh_Q
2020-12-21 18:27:01
183
原创 lodash的防抖节流
//less.pages-login {height: 400px;width: 500px;border: 2px #f00 solid;overflow-x: hidden;overflow-y: auto;position: relative;p {height: 100px;border: 2px #0f0 solid;margin: 10px;}}//jsximport React, { Component } from ‘react’import _ from “
2021-01-15 17:11:03
348
原创 前端优化
react || vue路由懒加载vue 组件异步加载页面内容1.减少HTTP* 通过 webpack 合并JS CSS文件* 使用 CSS Sprite 合并图片* 使用 Base64 行内图片* 用 icon 替换图标避免重定向* URL末尾添加 / 例如 http://www.baidu.com/缓存Ajax请求* 设置 Cache-Control (相对过期时间)减少页面元素数量JavascriptJS代码尽量放在页面底部, 避免阻塞页面加载使用
2021-01-15 17:09:47
63
原创 FileReader用于图片转换
import React, { Component } from ‘react’export class List extends Component {state = {img: ‘’,data: ‘’}onclick = () => { console.log(this.state.data);}getImageUrl = e => { // e.target.files:上传文件的信息 // console.log(evt.target.fil
2021-01-15 17:08:20
251
原创 antd中只能给兄弟节点拖拽拖拽
import React from ‘react’import { Tree } from ‘antd’//antd中只能给兄弟节点拖拽拖拽const x = 3const y = 2const z = 1const gData = []const generateData = (_level, _preKey, _tns) => {const preKey = _preKey || ‘0’const tns = _tns || gDataconst children = []f
2020-12-24 13:18:45
1122
1
原创 图片上传
import React from ‘react’import { Button, Upload, message } from ‘antd’import ‘./styles.less’export default class Login extends React.PureComponent {constructor (props) {super(props)this.state = {img: ‘’, // 存 imgimgData: ‘’, // 存 img 的数据}this.re
2020-12-21 18:36:53
50
原创 git的一些知识
从进公司公司 OPS(网管) gitlab 账号 密码: wangliang@qq.com 123456登录 gitlab 看下用户名安装 gitgit config --global user.name “1937444194”git config --global user.email wangliang@qq.comgit config --list 查看 git 配置6.1.首先需要创建公钥ssh-keygen -t rsa -C “你的github邮箱”2.接着打开公钥：ca
2020-12-21 18:35:22
142
原创 Promise
/** Promise* 为啥要用 promise: 回调地狱* 三种状态: 进行中 已成功(resolve) 已失败(reject)* new Promise((resolve, reject) => { }) 返回一个 promise(Promise 的状态一旦改变了 就永远不会再变了)resolve(参数): 把 promise 的状态 由进行中 -> 已成功reject(参数): 把 promise 的状态 由进行中 -> 已失败* 监听then(res =>
2020-12-21 18:33:39
101
1
原创 react的安装运行项目模板
// 1. 解压缩// 2. npm install -g cnpm --registry=https://registry.npm.taobao.org// 3. cnpm i 或者 yarn// 4. npm start//安装 lodashcnpm i lodash -S
2020-12-21 18:30:03
79
原创 react路由懒加载
import React from ‘react’;import Loadable from ‘react-loadable’// 默认的 Loadingconst loadingComponent = () => loadingexport default function (loader, loading = loadingComponent) {return Loadable({loader,loading,})}const Home = Loadable(()=> i
2020-12-21 18:28:33
163
1
原创 redux数据持久化
store数据持久化import { persistReducer } from ‘redux-persist’ // 数据持久化import storage from ‘redux-persist/lib/storage’ // localstorage// import sessionStorage from ‘redux-persist/lib/storage/session’ // sessionimport autoMergeLevel2 from ‘redux-persist/lib/s
2020-12-21 18:25:53
115
原创 react父子组件传值
// 父子组件通信// 1. props 父子组件传值// 2. redux 等状态管理工具// 3. createRef// 4. Context// 5. 发布订阅模式 pubsub-js
2020-12-21 18:22:58
58
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人