![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
ttt唐老鸭
爱做视频,爱玩游戏,爱摸鱼的程序猿
展开
-
react hooks useEffect的依赖为空时,函数内获取的状态state的值总是不变?
示例 const [state,setState]=useState(1) useEffect(()=>{ setInterval(() => { console.log(state)//每秒打印一次state }, 1000); },[])//依赖为空 <div className="App"> <h2>{state}</h2> <button onClick={()=&g原创 2021-04-01 17:22:27 · 2975 阅读 · 0 评论 -
js,react 下载图片/文件、打包下载zip文件/图片、base64图片解码不是有效的 Base-64 字符串
下载图片利用a标签,添加download属性赋予下载功能<img src={src} style={{width:100,height:100}}/><a href={src} download={'下载'}>点击下载图片</a>如何批量下载多个图片?主动循环触发多个a标签的点击事件即可打包成zip下载用到的第三方库jszip、 jszip官方api和demofile-saver下载库yarn add jszip / npm add jsz原创 2021-03-25 17:23:07 · 1091 阅读 · 0 评论 -
react 省市区地址级联 china-division、antd、Cascader
官方推荐的codesandbox在线例子代码地址效果使用yarn add china-division复制粘贴代码其他同理可以使用案例中遍历获得的数据进行其他操作。原创 2021-03-22 19:48:51 · 2334 阅读 · 3 评论 -
react 实现倒计时
思路利用setTimeOut,每秒将数值减一利用useRef设置定时器,方便清楚 const [time,setTime]=useState(null)//倒计时时间 const timeRef=useRef()//设置延时器 //倒计时 useEffect(()=>{ //如果设置倒计时且倒计时不为0 if(time&&time!==0) timeRef.current=setTimeout(()=>原创 2021-03-19 20:36:18 · 7008 阅读 · 0 评论 -
在react中使用 CodeMirror 自己制作在线代码编辑器
官网CodeMirror 下载npm install codemirror使用import React,{useEffect,useRef} from 'react'import CodeMirror from 'codemirror'import 'codemirror/lib/codemirror.css';function Test () { const textareaRef=useRef() useEffect(()=>{ let edi原创 2021-03-07 13:16:31 · 1173 阅读 · 0 评论 -
react hooks useState 使用总结
setState时请使用箭头函数示例function Test (props) { /*setState时候请使用箭头函数*/ const [noArr,setNoArr]=useState(0) const [arr,setArr]=useState(0) return( <> <Button onClick={()=>{setNoArr(noArr+1);setNoArr(noArr+1)}}&原创 2021-03-06 19:29:20 · 784 阅读 · 0 评论 -
ahooks,一个 react hooks好用的库
前言这几天重新过了一遍hook,在项目中自定义hook之后发现非常的爽,逻辑层可复用,与视图分离,找了找文档后发现了这个好用的库使用前提对react hooks 较为熟练地址ahooks方便在哪里?下面这里用它的一个最简单的demo来说明使用useToggle,const ToggleTest=() => { //shook写法 const [ state, { toggle,setLeft,setRight } ] = useToggle('left的值',原创 2021-03-05 22:09:54 · 4738 阅读 · 0 评论 -
react useMemo useCallback 作用
前言useMemo和useCallback是作为性能优化的,减少一些不必要的渲染useMemo对值的优化,如果这个值是依赖于某个值计算来的,我不希望其他state变化的时候,这个值也被重新渲染。function Test1 (props) { const [a,seta]=useState(0) const [b,setB]=useState(0) function getRes() { console.log('getRes函数执行了');原创 2021-03-05 07:07:03 · 234 阅读 · 1 评论 -
react 暴露配置文件,安装sass
暴露配置文件yarn eject如果出现Remove untracked files, stash or commit any changes, and try again.问题则执行下面两步git add .git commit -am "Save before ejecting"安装sassnpm install sass-loader node-sass --save-dev现在create react app已经自动配置了sass不用再自己手动配置...原创 2021-03-05 05:46:38 · 138 阅读 · 1 评论 -
react js 监听滚动条到底部
原理拿到dom元素添加onscroll事件更具下面参数判断垂直到底部scrollHeight - scrollTop ===clientHeight水平到底部scrollWidth - scrollLeft === clientWidth原创 2021-03-04 17:46:00 · 1430 阅读 · 1 评论 -
react 轮番图库swiper
相关地址github官方demoapiswiper的react使用文档实例import React from 'react'//引入核心和组件import SwiperCore, {Pagination,EffectCoverflow } from 'swiper';import { Swiper, SwiperSlide} from "swiper/react";//引入样式import "swiper/swiper.scss";import "swiper/components/原创 2021-02-25 19:34:35 · 178 阅读 · 0 评论 -
react/js 键盘输入监听
function Test2 (props) { let eventRef=React.useRef() const handleKeyDown=(e)=>{ console.log('e.code',e.code); } useEffect(()=>{ //利用ref保证只执行一次,避免每次渲染时候重复添加 if(!eventRef.current){ eventRef.current原创 2021-02-23 20:38:24 · 914 阅读 · 0 评论 -
react报错解决 Rendered more fewer hooks than during the previous render
错误此次渲染比上次渲染多出了hook错误实例代码点击是否显示Son组件时候会报错//父亲组件const Father = (props) => { const [fatherState,setFatherState] =useState(false) return( <> <span onClick={()=>{setFatherState(!fatherState)}}>原创 2021-02-21 21:34:23 · 12218 阅读 · 1 评论 -
react css 修改复写antd组件样式,而且不污染全局
方法比如说我想删掉antd Input.Search 的左边框从页面上找到要修改的位置,页面上修改后确定是这个样式名利用:globalcss中写法:global(.ant-input-search-icon:before){ border-left: initial;}scss或者less中写法 scss自带嵌套比较方便 :global{ .ant-input-search-icon:before{ border-left:原创 2021-02-09 21:20:42 · 5107 阅读 · 1 评论 -
如何在非react组件之外的普通js文件内使用redux
组件中是如何使用reduxconst store = createStore(todoApp, applyMiddleware(thunk))ReactDOM.render(( <Provider store={store}> <App/> </Provider> ), document.getElementById('root'))上面是使用redux入口必写的模板代码,再通过conn原创 2021-02-04 21:33:21 · 2967 阅读 · 0 评论 -
react context Provider Consumer 怎么用
context解决了什么问题避免了多层嵌套组件之间function 最外层组件 (props) { let 参数=1 return( <> <中间层组件 参数={参数}/> </> )}function 中间层组件 (props) { let 参数=props.参数 return( <> <最内部组件 参数={参原创 2021-02-04 17:26:01 · 1049 阅读 · 0 评论 -
react css Modules 添加多个className
单个写法//样式.sAll{ font-size: 30px;}//元素 <div className={styles.sAll}>aaaaaa</div>多个写法使用模板字符串处理//样式.sAll{ font-size: 30px;}.s1{ color: blue;}.s2{ color: red;}//元素 <div className={`${styles.sAll} ${styles.s1}`}>aaaaaa&原创 2021-02-04 16:50:11 · 2028 阅读 · 0 评论 -
前端react+scatter钱包+EOS的对接及账户余额查询。
前言Scatter的开发文档写的就…很多细节它都没说,导致我踩了很多坑。你敢信我是从报错->google报错->git上面的一个issue->vue版本的连接代码这样子搞出来的吗,我人傻了.前置准备1. eos链 比如下面的let jungle2 = { protocol: "http", blockchain: "eos", host: "jungle2.cryptolions.io", port: 80, chainId: "e70aaab8997原创 2020-12-31 20:52:13 · 697 阅读 · 1 评论 -
react-router中exact的作用
作用精准匹配如果不写的话<Switch> <Route path='/' component={InitHome}/> <Route path='/about' component={About}/> <Route path='/home'component={Home}/> </Switch>那么path='/'也会匹配'/about'和'/home'导致的结果就是下面两个路由就没用了path='/'path=原创 2020-12-25 17:15:17 · 3242 阅读 · 0 评论 -
简单说明redux-thunk的作用
是什么redux-thunk是react的一个applyMiddleware(中间件),你肯定经常在入口js文件中看到如下代码const store = createStore(todoApp,applyMiddleware(thunk)有什么用一个action中进行多次的dispatch一个action中做其他任何函数能做的事情(reducer因为必须是 pure function所以不能做很多事情)import {SHOWALL,SHOWNOTHING,ADDTODO} from '.原创 2020-12-23 22:40:19 · 735 阅读 · 0 评论