react
会点php的前端小渣渣
技术栈:mvc框架+react+vue+小程序+微信公众号开发
展开
-
js 简易封装字符串加密解密函数
【代码】js 简易封装字符串加密解密函数。原创 2023-11-13 14:35:28 · 188 阅读 · 0 评论 -
在react中使用styled-components写css样式 (真香)
首先优点就是 可以不用装node-sass、less那些了 css in js的基本使用:styled-components中包含各种标签同名的函数,在写样式的时候,就调用函数就行,重点是使用的形式来调用函数。函数返回一个react的组件。在css in js中写的写法形式,跟less scss基本一样,可以嵌套,可以使用伪元素 伪类等等。css in js 的中级使用 为写css in js提供智能提示。原创 2022-12-08 10:14:57 · 445 阅读 · 0 评论 -
css互相转换scss、css
sass to css:SassMeister | The Sass Playground!css to sass:css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code原创 2022-06-16 14:40:40 · 932 阅读 · 0 评论 -
getComputedStyle获取元素样式踩坑
正确用法: //点击时获取直线距离 getCoordinate(el) { Promise.resolve().then(() => { const firstChild = this.getControlPanelRoot().firstChild; let x, y, r, b; let WrapWidth = parseInt(getComputedStyle(firstChild).width); let WrapH...原创 2022-03-22 17:56:37 · 785 阅读 · 0 评论 -
forEach里面如何终止执行下一步(vuex举例)
使用的时候 主要包 try catch try { this.$store.commit('addNewProject',{projectName: this.addProjcetFrom.projectName,projectType: this.addProjcetFrom.projectType}) this.$store.commit('setCurrentProjcetIndex',{index:thi.原创 2022-03-01 10:08:59 · 826 阅读 · 0 评论 -
js (vue、react)通用元素任意拖拽效果
// 可拖拽组件:pc和Mobilefunction useMove(el) { el.style.position = 'fixed'; let offsetX, offsetY, oL, oT, oLeft, oTop; const browser = { versions: function () { const u = navigator.userAgent; return { mobile: !!u.m.原创 2022-02-15 16:59:42 · 233 阅读 · 0 评论 -
Vue 是如何更新 DOM 的?虚拟DOM和diff算法总结
虚拟DOM简而言之就是,用JS去按照DOM结构来实现的树形结构对象,你也可以叫做DOM对象最简单的创建虚拟dom的类// element.js// 虚拟DOM元素的类,构建实例对象,用来描述DOMclass Element { constructor(type, props, children) { this.type = type; this.props = props; this.children = children; .原创 2022-01-06 16:47:44 · 1333 阅读 · 0 评论 -
vue、react脚手架项目中环境变量 .env 文件原理
VUE_APP_NAME=bobVUE_APP_QQ=2410024100VUE_APP_URL=2410024100@qq.com单从这个文件来看,我们可以知道有如下功能需要实现:读取 .env 文件解析 .env 文件拆成键值对的对象形式赋值到 process.env 上最后返回解析后得到的对象简单实现const fs = require('fs');const path = require('path');const parse = function parse(s.原创 2022-01-04 10:15:00 · 1012 阅读 · 0 评论 -
2022年的vue、react面试题目汇总集合(持续更新)
vue系列:2021 Vue.js 面试题汇总及答案 - Jack Niu - 博客园react系列:React面试题及答案(2021年React面试题大全带答案) - 知乎2021年React常见的面试题以及答案(持续更新中...)_再见已是路人的博客-CSDN博客_react面试题及答案20212021年前端React面试题大汇总(收藏)-js教程-PHP中文网掘金高频前端面试题汇总之React篇(上)掘金高频前端面试题汇总之React篇(下)综合...原创 2021-11-05 15:55:12 · 3464 阅读 · 1 评论 -
使用dayjs 补全接口返回的日期
适用接口会返回2021-10-08、2021-10-10 、2021-10-11 没有连续性的...首先说下原理:使用开头的日期例如:2021-10-08,然后遍历 dayjs(dateKeys[0]).add(i, 'day').format('YYYY-MM-DD')自然而然就会自动补上日期了。效果图:首先准备一段模拟返回接口的数据 const res={"result":1,"errorCode":1,"errorMsg":"处理成功","obj":{"2...原创 2021-10-09 11:32:55 · 491 阅读 · 0 评论 -
react hook 版本 定时器倒计时
import React, { useState, useEffect } from "react"import { history, connect, Dispatch } from "umi"import { useLocation, useHistory } from "react-router"import { Button, Form, Input, Upload, message, Modal, Popconfirm, Spin, Select, Checkbox } from "ant.原创 2021-06-17 09:13:26 · 480 阅读 · 0 评论 -
React函数式组件使用Ref
简介大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进行修改,是一个很方便的特性。在传统类组件中,我们通过使用React.createRef()创建的,并通过ref属性附加到React 元素来使用。而随着hooks的越来越广泛的使用,我们有必要了解一下在函数式组件中,如何使用Ref.想要在函数式组件中使用Ref,我们必须先了解两个Api,useRef和forwardRef...原创 2021-06-15 10:51:15 · 5605 阅读 · 2 评论 -
react的antd Tree(树形组件)默认展开和选中踩坑及使用
踩坑:开始发现不能收缩、展开。。。还以为是有bug呢。。。哎。。真TM蛋疼1.只用expandedKeys和checkedKeys的问题 无法收缩和选中了。2.expandedKeys 的类型也很重要,比如下面key是number类型expandedKeys也必须是数字expandedKeys=[1,2],如果是这样xpandedKeys=["1","2"]也不会生效总体解决方案: 必须配合下面的2个属性才能正常的展开收缩setExpandedKeys([data[0]?.id]) ...原创 2021-05-22 12:37:03 · 5555 阅读 · 0 评论 -
使用splice删除内容后,useState 更新失败问题
起因:点击删除某行数据const [table, setTable] = useState<Array<crConsultGroupPageListData>>([])// 列表table.splice(index, 1) setTable([...table]) //这是正确的 要全量更新setTable(table) //这是错误的 并没有全量...原创 2021-05-19 13:55:39 · 704 阅读 · 0 评论 -
react Hook之useMemo、useCallback及memo
useMome、useCallback用法都差不多,都会在第一次渲染的时候执行,之后会在其依赖的变量发生改变时再次执行,并且这两个hooks都返回缓存的值,useMemo返回缓存的变量,useCallback返回缓存的函数。const value = useMemo(fnM, [a]);const fnA = useCallback(fnB, [a]);1、memo的应用React.memo 为高阶组件。它与React.PureComponent非常相似,但它适用于函数组件,但不适用于原创 2021-05-19 11:27:47 · 682 阅读 · 0 评论 -
react 自定义hook与高阶组件的区别
useState:现在有了hook,也能在function组件中管理数据状态了。import React, { useState } from 'react'const Counter = () => { // 定义需要管理状态的数据,在useState()中设置默认值 const [count, setCount] = useState(0) return ( <button onClick={() => {setCount(count原创 2021-04-28 15:12:18 · 1286 阅读 · 0 评论 -
generator函数+yield+Promise搭配使用(顺带回顾react框架的dva)
写react代码、或者写 dva.js框架的时候,经常会用到generator函数(经过封装 call、put) 主要很久没写generator函数和react了,特此回顾下。/* 1.先定义一个generator函数 + 搭配 Promise语法。 2.再使用yield 返回出Promise 3.由于使用fn(5).next().value接收的是个Promise,所以就可以使用then了 4.react 里面的yelid 看不到.next().value 这种,说明被封装过了*/...原创 2020-12-17 10:00:48 · 1351 阅读 · 2 评论 -
JS 数组中对象去重 reduce 高级技巧用法
let person = [ {id: 0, name: "小明"}, {id: 1, name: "小张"}, {id: 2, name: "小李"}, {id: 3, name: "小孙"}, {id: 1, name: "小周"}, {id: 2, name: "小陈"}, ]我们想去掉数组中id重复的对象,比如同样id为2的两个对象——{id: 2, name: "小李"}和{id: 2, name: "小陈"} (去掉任何.原创 2020-07-04 15:06:26 · 836 阅读 · 2 评论 -
新版本react,父组件调用子组件方法
import React, {Component} from 'react';export default class Parent extends Component { render() { return( <div> <Child onRef={this.onRef} /> ...原创 2019-04-19 15:18:49 · 1605 阅读 · 0 评论 -
Umi + Dva (model数据使用教程demo)
React 不多说,3大框架之一;Dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:“dva 是 react 和 redux 的最佳实践”。现在已经有了自己的官网https://dvajs.com;Antd 是阿里的一套开箱即用的中台前端/设计解决方案,UI框架,官网http://ant-design.gitee.io...原创 2019-03-01 10:18:24 · 14927 阅读 · 0 评论 -
react请求数据统一处理(axios)
开发中为了方便开发和便于维护,我们将所有的请求统一处理。这样可以提高我们的开发效率,而且便于后期的维护。在src目录下新建文件夹api,创建三个js文件:server.js,serverAPI.config.js,api.js.如下图:server.js文件处理axios跨域问题。代码如下:import axios from 'axios';//取消请求let CancelTo...原创 2019-02-22 19:28:52 · 2006 阅读 · 0 评论 -
react-redux 个人基本配置+使用心得
Redux 个人心得第一步: 在index.js 里面import React from 'react'import { render } from 'react-dom'import { Provider } from 'react-redux'import configureStore from './store/configureStore' 这个文件里面其实是配置 数据store 导出的...原创 2018-04-12 12:02:51 · 737 阅读 · 0 评论