It's ruined-优快云博客

原创 2021-10-28

```javascript/*和wolf差不多的框架https://x-render.gitee.io/form-render但是要依赖antd```*/

2021-10-28 10:26:42 118

原创树形转换

var list = [ { id:1, pid: 0, name: '0'}, { id:6, pid: 0, name: '0'}, { id:2, pid: 1, name: '11'}, { id:3, pid: 1, name: '11'}, { id:5, pid: 2, name: '222'}, { id:7, pid: 5, name:

2021-05-22 09:35:15 134

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="description" content="Web site created using create-react-app" /><title>React App XXXXXXX</title><meta name="viewport" content="widt

2021-05-22 08:06:53 161

原创自定义 instanceof---flat---去重--倒序

自定义 instanceoffunction myInstanceof(left,right){ let proto = left.__proto__ let prototype = right.prototype while(true){ if(proto === null)return false if(proto === prototype)return true proto = proto.__proto__

2021-05-14 09:09:07 155

原创关于Blob--可下载页面或者文件

function Blob1() { const onClick = () => { //文件里的东西 var aFileParts = ['<a>123456789</a>'] //下载文件的格式 var oMyBlob = new Blob(aFileParts,{ type: "text/html"}) //路径 const url = window.URL.createObjectURL(oMyBlob) //创建节点及各种

2021-05-07 16:01:41 100

原创能跳页面但不刷新 +css-modules

能跳页面但不刷新利用 pushState 或者 replaceState先在函数组件最外层写上：var _wr = function(type) { var orig = window.history[type] return function() { var rv = orig.apply(this, arguments) var e = new Event(type) e.arguments = arguments window.dispat

2021-05-06 18:26:03 149

原创 redux 原理

const defaultStatus = { name: '',}export default function xxx (state = defaultStatus, action) { switch (action.type) { case 'XXX': return { ...state, name: action.payload } default: return state }}export function create

2021-05-05 20:30:51 107

原创关于node最基础

在cmd中下载 nodemon 全局下载mac中的下载命令是 sudo cnpm i nodemon -g执行的命令是 nodemon --inspect index.js在log.js中是function log (ctx) { console.log(ctx) console.log(ctx.method,1) //请求的方法 console.log(ctx.header.host,2) //host console.log(ctx.url,3) //路径}module.

2021-05-05 15:40:14 79

原创关于webpack的基础

## webpack (运行在 node 环境)* 浏览器只认识 img css js html html5 css3 grunt 早没人用了 gulp 很少一部分人用 webpack 1 2, 3, 4, 5: 大部分 1. jsx async @ => 转化 ecma5 less sass => 转成 css 2. 压缩 3. img < 5K => 自动转成 Base64* 配置文件 webpack.config..

2021-05-05 15:33:28 93

原创关于Umi 基础

官方文档：https://umijs.org/zh-CN/docs/getting-started创建一个文件夹之后在终端运行 npx @umijs/create-umi-app 或者 yarn create @umijs/umi-app之后再安装一个node包 cnpm i 或者 yarn输入命令 npm start 就可以运行先删除ts文件之后创建一个config文件夹创建一个config.js 来替代ts文件ts的东西复制到config.js里面之后就是配置路由config.

2021-04-29 15:29:58 412

原创观察者模式也就是发布订阅----静态，动态的权限-柯里化-async原理

静态，动态的权限：====》动态的*** 动态权限后台知道权限能访问路由vip: 登录svip: 登录首页const xxx = [ { url: '/login', context: '@/pages/login', title"首页" }, { url: '/home', context: '@/pages/home', },]// 递归 const routes = [ { path: '/login', compon...

2021-04-29 11:13:56 111

原创 React中的context

context的优点是我们假如有一个父组件和2个组件a,b 从父组件传值给ba中嵌套的b不能直接传得父组件=》b组件=》a组件当我们使用context的时候就可以直接从父元素传给子组件a 有两种写法一种是class 还有一种是函数组件首先我们先用class写在父组件中写import React, { Component } from 'react'import B from './b'import Context from './c'export class Move

2021-04-28 18:30:36 68

原创 React中的传送门及 html的meta中viewport

html的meta中viewport实际就是虚拟的窗口而且这个虚拟窗口的分辨率接近于桌面显示器也就是视觉窗口 width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"initial-scale 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数height 设置layout viewport

2021-04-28 18:29:32 188

原创高阶组件 ----- 自定义hook 两种实现

React 自定义hook 的实现必须是use开头实例如下：自定义组件： import React,{ useEffect, useState} from 'react' function Reuse() { const [xy,setXy] = useState({ x:0, y:0}) const one = (e) => { setXy({ x:e.clientX, y:e.clientY }) } useEffect(

2021-04-28 18:28:14 388

原创关于React的rem-----React的icon

//rem(function(e,n){ "use strict"; var t = function(){ var t=document.getElementsByTagName('html')[0].clientWidth; return t?void(n.documentElement.style.fontSize=20*t/640+"px"):!1 }; t() e.addEventListener("resize",t,!1) e.addEven

2021-04-28 18:26:18 124

原创关于redux-actions : 优化redux的写法

先下载 redux-actions 插件在action中使用： import { createActions } from 'redux-actions'import { SET_HOME_DATA，SET_HOME_LIST } TYPES from '@/constants/actionsTypes.js'export default createActions({ [SET_HOME_DATA]: opt => post(api.list, pot),

2021-04-28 18:21:45 90

原创执行顺序

/* 同步任务 -> 微任务 -> 宏任务同步任务微任务 reslove await resject(微任务里面的优先级是最低的) 宏任务 */ console.log(1) new Prom

2021-04-28 18:20:04 79

原创关于react的常用的hook

使用hook 的原因是复用状态逻辑 hook 的规则 1.hook 需要写到函数的最顶层，不能写到for、map、if里面 2.hook 必须写到函数组件内们不能写到类组件 3 自定义hook必须以use开头 ///////////////////// 1.React.useState这个是定义值的里面能直接给值也能写逻辑需要的时候里面写一个函数写一些需要的逻辑最后返回一个最终值即可 2.React.useEffect这个能模仿三

2021-04-28 18:19:17 215

原创关于react的16.8以后新增的路由按需加载

引入pages里面的内容的时候用 lazy import React,{ lazy } from 'react'例如 const Home = lazy(() => import('@/pages/home')) 再去index.js中引入 Suspenseimport React, { Suspense } from 'react'用Suspense包起来 <Suspense fallback={<div>Loading...</div>}&gt

2021-04-28 18:16:42 130

原创 H5中的fileReader + formData

react + antd我们在提交数据的时候如果需要提交图片的话最终没有按下确定并且返回这样就会产生脏数据因为图片已经上传了所以就用到了我们h5的技术fileReader//antd或者原生是一个方法function fileReader () {// 文件读取成 URLfunction fileUrl (file) {return new Promise(resolve => {// 初始化 FileReaderconst fr = new FileReader()

2021-04-28 16:26:33 189

原创关于 git 各种命令

下载 SourceTree 中文安装 gitgithub: 面向个人功能会简单一些注册 github 账号gitlab: 面向企业功能非常复杂—下载好 git之后 cmd里输入的git config --global user.name “username”git config --global user.email “email”查看git配置 git config --list之后公钥私钥1.首先需要创建公钥ssh-keygen -t rsa -C “你的git.

2021-04-26 21:19:22 129

原创对象，Promise

const obj = {name:'小花’,age:25,city:‘哈尔滨’}console.log( Object.keys(obj) ) //[‘小花’，‘25’，‘哈尔滨’]console.log( Object.value(obj) ) //[‘name’，‘age’，‘city’]console.log( Object.entries(obj) )//[Array(2), Array(2), Array(2)] =>//0: (2) [“name”, “小花”]//1

2021-04-26 21:18:34 47

原创函数+this

//this:this 代表当前正在执行的对象var name = ‘小花’const obj ={name:‘小白’fun () { console.log(this.name)}}// 1.obj.fun()//输出的是小白//2.const f= obj.fun//相当于是window.f()f() //输出的是小花// 3.obj.fun.cal({name:‘小红’})//输出的是小红//////////////////////////////////

2021-04-26 21:17:39 104

原创 react中终端安装 lodash 一小部分

引入的时候就可以是这样以下的代码用于 reducer 文件夹的js文件中//引入！！！！！import _ from ‘lodash’;import { SET_HOME_NAME, SET_HOME_DATA } from ‘@/constants/actionsTypes.js’;const defaultStatus = {name: ‘小花’,data: [],}export default function homeReduce (state = defaultStatus,

2021-04-26 21:16:19 174

原创关于跨域的解决办法

//跨域：同源策略：协议域名端口以上只有一个不同就会产生跨域jsonp后台设置 CORS 请求头node做代理http-proxy-middleware在src下的文件夹中创建一个 setupProxy.js 文件代码如下：const { createProxyMiddleware} = require(‘http-proxy-middleware’)module.exports = function (app) {app.use(// /api 是一个表示 htt

2021-04-26 21:14:32 62

原创关于rduex中的持久化

从终端安装的持久化的命令： cnpm i redux-persist -S首先先从src下的index.js中引入redux 引入如下：import { persistStore } from ‘redux-persist’import { PersistGate } from ‘redux-persist/lib/integration/react’引入完毕之后在render中写：ReactDOM.render(//这个是redux//这个是持久化,documen

2021-04-26 21:13:04 85

原创 React 中关于同步redux的相关配置

首先我们要去安装关于redux的命令如下：cnpm i redux react-redux redux-promise redux-thunk redux-persist -S在src中创建一个store.js文件！！在这个项目中这个创建的文件只能有一个！！代码如下：import { createStore, compose, combineReducers, applyMiddleware } from ‘redux’import promise from ‘redux-promise

2021-04-26 10:23:00 209

原创 React 路由懒加载相关配置

创好文件之后现执行安装命令如下：cnpm i http-proxy-middleware customize-cra react-app-rewired @babel/plugin-proposal-decorators babel-plugin-import -S创建一个和src同级的config-overrides.js文件里面写上一下代码 ⬇⬇const {addWebpackAlias, // 别名addLessLoader, // 加载 less sassfixBabelIm

2021-04-26 10:16:51 136

原创 react中key值用index对么？这样用有问题么？

react中key值用index对么？这样用有问题么？在react中key值用index是对的，但是也有问题，在进行删除的时候react里会进行一个虚拟Dom也就是diff比较虚拟Dom和真实的进行比较从而渲染出变量中发生变换的节点带着身旁的固定节点这时就产生了问题因为index不具有唯一性所以渲染就会产生错误用时间戳实现id功能不可以，因为浏览器引擎计算时间非常快甚至1毫秒就可以计算多次这样的话就id冲突所以综上使用 id 更好或者使用shortid插件当作id 也可以

2021-04-26 10:15:06 340

原创 react基础

/**JSX不是 HTML是一个对象 - type props chilrenReactDOM.renderProps:单向数据流A -> B -> C -> D从 A -> D 传值 user = '小花' // user -> 小白 <B user="小花" /> <C user="小花" /> <D />父组件传值state组件自己属性this.setState({属性: 值

2021-04-26 10:12:28 82

Zhang__fan的博客