![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
本宝宝很开心
做一名合格的搬运工
展开
-
tweenjs+threejs 多个动画依次执行
1.使用场景:当小车自动驾驶时,会由多条路线依次驶过,而tweenjs动画是链式函数执行let myTwen = new TWEEN.Tween(position); //position格式 :{x:x,y:y} myTwen.to( { x: geometryGroup[1][0], y: geometryGroup[1][1], }, 7000 ) .onUpdate((pos) => {原创 2022-01-20 17:05:31 · 1626 阅读 · 2 评论 -
屏幕坐标转换成threejs的坐标
使用场景:当我们点击屏幕时获取的坐标和three的坐标不一样时,这时候就需要转换。 const convertCoodsToThree = (mouseX, mouseY, mouseZ = 0) => { const x = (mouseX / window.innerWidth) * 2 - 1; const y = -(mouseY / window.innerHeight) * 2 + 1; var vec = new THREE.Vector3(); va原创 2022-01-19 20:15:37 · 1274 阅读 · 0 评论 -
数字转大写(monery)
//数字转大写(monery) static numToCny = (money) => { // 汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); // 基本单位 var cnIntRadice = new Array('', '拾', '佰', '仟'); // 对应整数部分扩.原创 2022-01-06 20:45:05 · 617 阅读 · 0 评论 -
Mapbox icon-image表达式
1.case 'icon-image': [ 'case', ['==', ['get', 'status'], 3], 'imageIcon1', ['all', ['==', ['get', 'status'], 2], ['==', ['get', 'statusA'], 1]], 'imageIcon2', ['all', ['==原创 2022-01-06 20:43:07 · 1947 阅读 · 1 评论 -
SWR的使用教程
SWR用于数据请求的 React Hooks 库,使用 SWR,组件将会不断地、自动获得最新数据流。UI 也会一直保持快速响应。安装yarn add swr 或者 npm install swr使用const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)1.封装useFetch指令export function useFetch<Data = any, Error = any>(u.原创 2021-11-22 21:18:02 · 1168 阅读 · 0 评论 -
mapbox两个图层重合,点击事件都触发问题
使用场景:地图增加了两个layer并且重合,点击重合部分,layer的点击事件都会触发解决方法:1.梳理出两个图层的层级顺序,点击上面一层不触发下面一层的点击事件可以使用e.preventDefault();在下面图层判断e.defaultPrevented。在复杂一点,点击上面不触发下层,点击下层不触发上层事件,可以结合 queryRenderedFeatures判断map.on("click", (e) => { var features = map.queryRende原创 2021-11-22 21:16:05 · 2351 阅读 · 0 评论 -
react 在中文输入时触发input的改变事件
背景:input框在输入中文出现拼音的过程中,会一直触发onchange事件解决方法:input标签自带输入开始(onCompositionstart)与输入完成(onCompositionEnd)两个事件;原创 2021-09-22 16:39:05 · 1455 阅读 · 0 评论 -
Unexpected keys will be ignored.
emgcReport", “resources”, “disposalJudgment”, “earlyWarning”, “emgcStop”, “infoReception”, “assessTemplate”, “emgcDrill”, “record”, “fireTeam”, “firePlan”, “workForce”, “fireEngines”, “carFile”, “carMaintain”, “carStatus”, “actionSysState”, “interfacePlatf原创 2021-07-19 19:36:23 · 212 阅读 · 0 评论 -
canvas实现虚线带箭头效果
import { useEffect,Fragment } from “react”import “./index.css”const arr=[{id:1,name:“测试1”},{id:2,name:“测试2”},{id:3,name:“测试3”},{id:4,name:“测试4”},{id:5,name:“测试5”},]const MapCanvas =()=>{useEffect(()=>{arr.map((v,index)=>{if(原创 2021-07-14 20:12:55 · 1023 阅读 · 1 评论 -
react echarts中国地图的实现
安装echartsnpm install echarts --saveimport { useEffect } from "react"import * as echarts from 'echarts'; //全局引入 ,可按需引入import china from "../utils/china.json" import "./map.css";const Map=()=>{ var myChart ; useEffect(()=>{ l原创 2021-07-13 20:12:03 · 1199 阅读 · 1 评论 -
React Hooks useState useEffect
react hooks在16.8版本中推出,自推出后备受好评,因为他解决了旧版本上组件无法复用状态逻辑的问题原创 2021-07-12 20:52:58 · 273 阅读 · 0 评论 -
React修改打包后的文件名称
1.新建.env.production文件2.修改.env.production文件代码BUILD_PATH=dist原创 2021-07-08 20:50:00 · 2228 阅读 · 2 评论 -
umijs引入link、router报错
import Link from “umi/link”umi/link in ./src/pages/index.tsxTo install it, you can run: npm install --save umi/linkimport {Link} from “umi”import router from ‘umi/router’;<button onClick={() => { router.goBack(); }}>go back</button>原创 2021-07-08 20:48:51 · 1357 阅读 · 0 评论 -
dva Reducers与Effects的使用介绍
介绍dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。定义modeldva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects,订阅数据源的 subscriptions 。Reducers在 model 文件夹下新建products.js文件export defaul原创 2021-07-07 17:13:01 · 5660 阅读 · 0 评论 -
react网路网络接口是否请求依赖另一接口请求结果
在请求任何接口前,先请求token是否过期这个接口(接口名:isToken),后台返回false时,界面返回登录界面并不请求其他任何接口;在接口拦截器里面判断url如果不是isToken则请求token是否过期这个接口,然后写判断逻辑最后会出现token失效多次弹窗,可以存一个变量,在登录界面的生命周期函数中判断是否是因为token失效返回的界面,如果是则不做任何操作...原创 2021-07-05 21:03:47 · 370 阅读 · 0 评论 -
React+Hooks useMemo和useCallback的使用
在使用function的形式创建组件时,内部state就无法向class声明组件去通过shouldComponentUpdate进行判断值是否变化,这样就会出现较大的性能消耗,所以就有了useMemo和useCallback,(PS:useMemo返回缓存的变量,useCallback返回缓存的函数)1.useMemoimport React,{useMemo, useState} from 'react';export default function NumMemo() { const [原创 2021-07-05 20:54:23 · 145 阅读 · 0 评论 -
react fetch请求本地模拟接口报错(SyntaxError: Unexpected token < in JSON at position 0)
1.使用fetch时请求本地模拟json文件时拿不到数据解决方法:将json文件放在与index.html文件同级 fetch("./data.json",{method:"get"}).then(res => { return res.json() } ) .then( (result) => { console.log(res原创 2021-07-05 10:58:02 · 672 阅读 · 0 评论 -
react+hooks的定时器问题
1.使用场景:当页面需要实时获取当前时间时常常使用定时器来获取import { useEffect, useState } from "react";const Time =()=>{ const [date,setDate]=useState(""); useEffect(()=>{ let timer=setInterval(()=>{ setDate(new Date().getSeconds()); console.log("定时器开始了原创 2021-07-04 20:22:48 · 1472 阅读 · 0 评论 -
dva : 无法加载文件 xxxx\npm\dva.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅...
1.打开PowerShell,由管理员身份运行;2.输入get-ExecutionPolicy,获取到的值为Restricted;3.输入Set-ExecutionPolicy -Scope CurrentUser;4.出现ExecutionPolicy: ,填入RemoteSigned;5.是否更改策略设置,填入Y6.再次输入get-ExecutionPolicy,此时值为RemoteSigned;更改完成后,输入get-ExecutionPolic在PowerShell获取到的值Remote原创 2021-07-01 15:04:31 · 503 阅读 · 0 评论 -
React使用require时引入图片不显示
1.需求:React面临动态引入图片时,会使用到require,直接使用require时,图片不会显示<img src={require("地址")} alt="" /}2.解决方法 后面添加.default<img src={require("地址").default} alt="" /}如果图片是动态引入的,按照下面这种方式let imgAddress="././assets/img";<img src={require(imgAddress).default} alt原创 2021-07-01 13:45:55 · 1166 阅读 · 1 评论 -
React打包出现:The project was built assuming it is hosted at ./.
错误提示:The project was built assuming it is hosted at ./.You can control this with the homepage field in your package.json.在项目的package.json文件中增加"homepage":"./"原创 2021-06-30 13:45:57 · 1856 阅读 · 0 评论 -
Echarts双柱状图与双折线图(居中)
效果图:(PS:双柱+双折线居中)1.安装echartsnpm install echarts --save-dev2.引入(也可按需引入)import * as echarts from 'echarts';3.html <div id="mainBottom" className="mainBottom"></div>4.js var chartDom = document.getElementById('mainBottom'); //react项原创 2021-06-16 17:49:49 · 6196 阅读 · 2 评论 -
搭建react项目
1.npm install -g create-react-app2.create-react-app my-project3.npm install react-router-dom --save4.npm install sass-loader node-sass --save-dev (sass配置)webpack.config.js配置添加{test: /.scss$/,loader: [‘style-loader’, ‘css-loader’, ‘sass-loader’],}原创 2021-06-08 19:58:06 · 58 阅读 · 0 评论 -
react 前端屏幕多分辨率适配方案
1.安装以下包 npm i lib-flexible sass-loader node-sass postcss-px2rem-exclude --save2.npm run eject 暴露webpack配置,添加以下代码const px2rem = require('postcss-px2rem-exclude'); px2rem({remUnit:75,exclude: /node_modules/i})3.在index.js中引入import "lib-flexible"4.原创 2021-06-07 22:13:27 · 1437 阅读 · 1 评论 -
redux 中间件异步操作的用法(二)
为什么需要中间件Action提交后,Reducer会立即计算出State,如果在Dispatch一个Action后,到达Reducer之前需要进行一些其他的操作,这时候就需要用到中间件,在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告,调用异步接口或者路由等等安装redux-thunk后引入import { createStore, applyMiddleware, compose } from 'redux'import reducer from "./reducer"import th原创 2021-06-07 20:10:10 · 91 阅读 · 1 评论 -
vue 面试题
VUE1.vue的生命周期beforeCreate>created>beforeMount>mounted>beforeUpdate>updated>beforeDestroy>destroyedbeforeCreate:data和methods中的数据还没有初始化created: 在created中,data和methods都已经初始化好beforeMount: 此时模板已经在内存中编辑完成了,但尚未把模板渲染到页面中mounted: 表示内存中的模板原创 2021-06-04 17:02:58 · 136 阅读 · 0 评论 -
redux的基本用法(入门一)
1.storestore保存数据的地方,可以看成一个容器,整个应用只能拥有一个storeRedux提供createStore函数用来生成storeimport { createStore } from 'redux';import reducer from './reducer'const store = createStore(reducer );//createStore函数接受另一个函数作为参数,返回新生成的store对象2.State一个 State 对应一个 View,通过与用户原创 2021-03-31 10:33:36 · 159 阅读 · 0 评论 -
Next.js创建页面及基本路由结构
1.在pages文件夹下创建xx.js文件function xx(params) { return ( <div> hello xx </div> )}export default xx注:直接访问 http://localhost:3000/xx 不用自己配置路由 (xx指文件名称)2.实现 http://localhost:3000/user/name.js在pages下新建user文件夹,在创建name.js...原创 2021-03-02 11:08:04 · 598 阅读 · 0 评论