- 博客(40)
- 收藏
- 关注
RSS订阅
原创 git 提交代码一系列操作
git status 查看状态git diff 查看修改了哪些代码 (可不进行操作)git add . 存暂时性死区git status 再次查看状态 是否保存git commit -m ‘ccf’ 提交文件到本地git push origin hz_pay 把当前分支push到远程分支git checkout test 切换测试分支git pull origin test 拉取远程分支的代码到本地git pull origin hz
2021-06-07 10:49:32
141
原创 常用的hook
使用hook 的原因是复用状态逻辑hook 的规则1.hook 需要写到函数的最顶层，不能写到for、map、if里面2.hook 必须写到函数组件内们不能写到类组件3 自定义hook必须以use开头/////////////////////1.React.useState这个是定义值的 里面能直接给值 也能写逻辑 需要的时候里面写一个函数 写一些需要的逻辑最后返回一个最终值即可2.React.useEffect这个能模仿三个class的生命周期a.第一个是componentD
2021-04-02 16:21:43
2264
1
原创 git命令
git branch —查看git branch -D xx ----删除git checkout xx —切换master --不能污染—下载好 git之后 cmd里输入的git config --global user.name “username”git config --global user.email “email”npx create-react-app xxx --档一个新的react文件 *****git log —查看保存的文件记录‘$ git
2021-02-25 08:15:31
155
转载 父子兄弟组件传值
1、父组件传值子组件在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。父组件向子组件传值，通过props，将父组件的state传递给了子组件。父组件代码片段：constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <Child txt
2021-10-11 11:17:27
224
转载 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.j
2021-05-07 18:27:57
111
转载 页面跳转 不刷新
能跳页面但不刷新 利用 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-07 18:25:10
281
原创 配置node环境
cnpm i -g nodemon文件里面安装：cnpm i koa -S进入到那个目录： nodemon --inspect index.js 启动服务内容：const Koa = require(‘koa’)const app = new Koa()app.listen(8080, () => console.log(‘8080’))
2021-05-05 14:15:09
93
原创 andt多选框(选择x个之后禁用)
const [data, setData] = useState([ { id: 0, name: '小说', disabled: false }, { id: 1, name: '科幻', disabled: false }, { id: 2, name: '植物', disabled: false }, { id: 3, name: '动漫', disabled: false }, { id: 4, name: '动物', disabled: false },
2021-05-04 21:36:01
98
原创 H5图片加载 预览效果
// FileReader// new FileReader()// readAsDataURL(File数据)：返回一个Base64格式// onload(evt => evt.target.result)：监听读取完成import React, { useState, useRef } from 'react'function fileReader () { // 文件读取成 URL function fileUrl (file) { return new
2021-04-28 14:15:41
165
原创 taro
首先进入 官方文档https://taro-docs.jd.com/taro/docs/README/因为前几天更新过3.0的版本了 所以 说关于3.0的taro是制作微信小程序，h5等有效的开发工具 对于react人员是比较友好的首先，你需要使用 npm 或者 yarn 全局安装 @tarojs/cli这东西安装一次就行了 全局的使用 npm 安装 CLI$ npm install -g @tarojs/cliOR 使用 yarn 安装 CLI$ yarn global add @t
2021-04-27 19:12:16
161
1
原创 面试题
三种水平居中：css盒模型：外边距(margin) 内边距(padding) 边框(border) 实际内容(content)redux工作流程：视图触发action action触发reducers reducers触发视图this的定义：this代表当前正在执行的对象redux三大基本原则1、单一数据源,全局只有一个store2、state在页面里是只读的 触发action ->修改state3、state只能在reduce里改 并且reduce 必须是纯函数为什么要是用hoo
2021-04-27 11:21:28
175
原创 实现单点登陆
引入 document.addEventListener(‘click’, () => {window.frames[‘xxx’].postMessage(‘小花222’,’*’)},false)3001 window.frames[‘xxx’].postMessage(token, ‘*’)3000window.addEventListener(“message”, evt => {console.log(evt.data, ‘xxx’)}, false)...
2021-04-26 13:35:32
72
原创 关于localStorage的监听 和 WebSocket
首先的条件是在同源的两个页面上才会发生效果首先我们要先设置localStorage的值（值不一样的时候触发）在另一个页面 使用window.addEventListener(“storage”, function (e) {alert(e.newValue);});详细地址是：https://www.jianshu.com/p/519a1b42d659自己模拟的话现在src下创建一个ws.js里面写var WebSocketServer = require(‘ws’).Server,
2021-04-25 18:38:42
322
原创 利用Promise分装axios
import axios from ‘axios’import qs from ‘qs’// url 是请求的服务器地址// payload 参数export function post (url, payload = {}) {return new Promise((resolve, reject) => {let result = ‘’if (sessionStorage.getItem('token')) { result = { ...payload, token: sess
2021-04-22 21:08:43
100
原创 andt3.0
首先 在class组件里面//////////////////////////////////////////////////////////////////////////////////import React from ‘react’import { Form, Icon, Input, Button, Checkbox } from ‘antd’//这个是关于编辑的 先创建一个Form 在 mapPropsToFields 里面进行编辑（回填）export default @Form.cr
2021-04-22 21:07:20
145
原创 转数字 拷贝
//转数字 var num=386485473.88 var str=String(num)//转字符 var arr=str.split('.')//转数组 console.log(arr[0]) str=arr[0]//赋值 var brr=[] var i=str.length while(i-3>=0){//大于等于三的情况下 brr.uns.
2021-04-22 21:06:37
74
原创 国际化 i18n
先在utlis中创建一个 i18n.js的文件夹import i18n from ‘i18next’;import { initReactI18next, useTranslation } from ‘react-i18next’;import { zh, en } from ‘@/constants/local’const lng = ‘en’;//默认的语言i18n.use(initReactI18next) // passes i18n down to react-i18next 将i1
2021-04-22 21:05:23
251
原创 回流和重绘
回流和重绘什么是回流当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。什么是重绘当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格
2021-04-22 21:03:33
104
原创 antd3 回填
import React from ‘react’import { Form, Icon, Input, Button, Checkbox } from ‘antd’;class FormBox extends React.Component {handleSubmit = e => {e.preventDefault();this.props.form.validateFields((err, values) => {if (!err) {console.log('Receive
2021-04-19 15:18:16
193
原创 dav的使用
dva 也是 umi 的状态管理器首先在pages里面的文件夹（例如home文件）中创建一个models文件夹里面放dva我们整体抛出的是一个对象对象中namespace代表的是取值的名字 一般是父文件的名字state是存放一些值reducers是存放一些方法都是同步的 写法和redux差不多effects里可以写一写异步的请求方法 利用Generator 的写法以上都是对象的形式例如在 effects 里写一个方法（异步的）payload这个是传的一些值call 这个是用作异步调用p
2021-04-16 18:24:35
1133
原创 上下移动
import arrayMove from ‘array-move’/**@item 当前移动的节点@direction: up | down 移动的方向*/import arrayMove = from ‘arrayMove’function moveDone (item, direction = ‘up’) {const arr = […data]const lastPosition = arr.length - 1 // 最大的位置const index = arr.indexO
2021-04-16 18:24:04
344
原创 dav数据持久化
import { persistStore, persistReducer } from ‘redux-persist’import storage from ‘redux-persist/lib/storage’const persistConfig = {key: ‘root’,storage,whitelist: [‘home’], // 配置白名单 里面写需要配置的名字}// 数据持久化const persistEnhancer = () => createStore =&g
2021-04-16 18:23:27
1098
1
原创 dav初始化数据
先下载插件 利用正则的匹配import { pathToRegexp } from ‘path-to-regexp’subscriptions:{//随便名字deep ({ dispatch, history }){history.listen(({ pathname }) => {//正则匹配const isbool = pathToRegexp(’/home’).exec(pathname)if(isbool){dispatch({type:‘fetch’, //事件名 可以前
2021-04-16 18:22:55
79
原创 class @修饰符
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950class Person {static pop = ‘我是父类的静态方法’constructor(username,age){this.username = usernamethis.age = age}each()
2021-04-16 18:21:54
157
原创 React中的传送门 及 html的meta中viewport
html的meta中viewport实际就是虚拟的窗口而且这个虚拟窗口的分辨率接近于桌面显示器也就是视觉窗口width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"initial-scale 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数height 设置layout viewport
2021-04-15 13:21:42
262
原创 关于Promise和Generator 的基本用法
Promise是es6解决异步操作的方案// function a0 () {// return axios.post(url)// }// Promise.all([a0(),a0()]) // all 等待多个全部返回 race 是比赛 谁快返回谁 Promise.allSettled()这个是全返回 对的错的都返回// .then(res => {// console.log(res)//
2021-04-15 13:20:45
111
原创 umi的基础配置
umi 配置路由创建config文件 -> config.js把umirc.ts 复制进 config.js路由拆分在config文件 -> routes.js将config.js里routes数组放入routes.js抛出config.js引入proxy代理拆分 同上在config.js中 写入// 代理proxy: {‘/api’: {target: ‘https://blogs.zdldove.top’,changeOrigin: true,pathRewr
2021-04-15 13:19:47
916
原创 mobx管理工具
它有多个store首先下载关于它的依赖cnpm i mobx@5.15.7 -Scnpm i mobx-react@6.2.2 -S //在src文件夹里的index.js引入所以应该有一个有关他的文件夹import { observable, computed, action, toJS } from ‘mobx’/*observable 是声明的 computed有get也有set action是修改的 toJS是查看的*/import { getList } from
2021-04-15 11:25:52
230
原创 Context 传值
1、首先创建一个子组件，返回 React.createContext(‘默认参数’)import React from ‘react’// 创建contextexport default React.createContext(‘默认参数’)2、在父组件引入这个子组件import React, { useState } from ‘react’import B from ‘./b’import ThemeContext from ‘./c’<ThemeContext.Provider&
2021-04-06 18:42:20
703
原创 关于react的16.8以后新增的路由按需加载 lazy
引入pages里面的内容的时候 用 lazyimport React,{ lazy } from ‘react’例如const Home = lazy(() => import(’@/pages/home’))再去index.js中引入 Suspenseimport React, { Suspense } from ‘react’用Suspense包起来<Suspense fallback={Loading…}>但是他有一个缺点就是不能前后端一起 全是前端的时候推荐用它
2021-04-02 16:22:59
78
原创 关于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),[SET_HOME_LIST]:
2021-04-02 16:20:51
114
原创 高阶组件 ----- 自定义hook 两种实现
自定义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( () => {document.addEventListener(‘mo
2021-04-02 16:18:56
362
原创 关于跨域的解决办法
//跨域：同源策略：协议 域名 端口以上只有一个不同就会产生跨域jsonp后台 设置 CORS 请求头node做代理http-proxy-middleware在src下的文件夹中创建一个 setupProxy.js 文件代码如下：const { createProxyMiddleware} = require(‘http-proxy-middleware’)module.exports = function (app) {app.use(// /api 是一个表示 htt
2021-03-17 18:19:30
136
原创 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-03-17 18:18:23
475
原创 对象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-03-17 18:16:35
70
原创 关于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-03-17 18:15:35
105
原创 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-03-17 18:13:25
90
原创 react中key值用index对么？这样用有问题么？
react中key值用index对么？这样用有问题么？在react中key值用index是对的，但是也有问题，在进行删除的时候react里会进行一个虚拟Dom也就是diff比较 虚拟Dom和真实的进行比较从而渲染出变量中发生变换的节点带着身旁的固定节点 这时就产生了问题 因为index不具有唯一性所以渲染就会产生错误用时间戳实现id功能不可以，因为浏览器引擎计算时间非常快 甚至1毫秒就可以计算多次 这样的话就id冲突所以综上 使用 id 更好 或者使用shortid插件当作id 也可以
2021-03-17 18:11:35
199
原创 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-02-25 08:14:32
198
原创 react基础
JSX不是 HTML是一个对象 - type props chilrenReactDOM.render setStateProps:单向数据流A -> B -> C -> D从 A -> D 传值 user = '小花' // user -> 小白 <B user="小花" /> <C user="小花" /> <D />父组件传值state组件自己属性this.setState({属性:..
2021-02-21 18:32:30
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人