臧小川的博客

【代码】CountUp基本使用。

【代码】react动态绑定ref。

【代码】react封装弹窗。

import { useState, useEffect, useRef } from 'react'/** * 返回一个有状态的值，持久化在 localStorage 中，并有一个函数来更新它。 * @param {string} localStorage-Key * @param {string} localStorage-value * @return {value,setValue} value-新值 setValue-修改值的方法 */const usePersistedSta

import { useState, useRef, useCallback } from 'react'const useHover = () =>{ const [isHovering, setIsHovering] = useState(false); const handleMouseOver = useCallback(() => setIsHovering(true), []); const handleMouseOut = useCallback(() => se

/** * 跟踪浏览器的位置搜索参数。 * @param {string} useSearchParam 传递参数 search 名称 * @return {string} useSearchParam 相应 search 值 */

/** * 创建一个持久化到 localStorage 的有状态的值，并创建一个函数来更新它。 * @param {string} keyName:key * @param {string} defaultValue:初始值 * @return {Function} storedValue：本地存储值，setValue：修改值的函数，removeValue：清除函数 */

import { useState, useEffect, useCallback } from 'react';const index = () =>{ const useHash = () => { const [hash, setHash] = useState(() => window.location.hash); const hashChangeHandler = useCallback(() => {

自定义Hook-useinterval

import { useRef } from 'react';import ballBg from '@/assets/ballNav/ballBg.png'import centerNg from '@/assets/ballNav/centerNg.png'import title from '@/assets/ballNav/title.png'import pu from '@/assets/common/pu.png'const boxStyle = { height: '400

import { useState, useCallback, Fragment } from 'react';import Child from './Child'const index = () =>{ const [count, setCount] = useState(1); const [content, setContent] = useState('Lee'); // 修改input的 `content`值 const intChang = (event)

由于Hooks出来之后，我们可以采用函数组件创建复杂组件，但是失去了`shouldComponentUpdate`所以无法判断前后状态是否更新了。

321

无法通过 import 引入视频解决方案配置webpack loader ~ 配置方法自行百度更改 .umirc.ts 配置视频存入 public 路径下并且使用相对路径

效果图JSimport styles from './style.less'const index = () =>{ return ( <div className={styles.wrap}> <div className={styles.container}> <div className={styles.title}>登陆</div>

效果图JSimport { Fragment, useState } from 'react';import styles from './style.less';import huang from '@/assets/shengtaihuanjing/huang.png';import hong from '@/assets/shengtaihuanjing/hong.png';import hui from '@/assets/shengtaihuanjing/hui.png';impo

效果图JSimport React, { useState, Fragment } from 'react';import styles from './style.less'const data = [ { name: '羽神', id: 1, src: 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a5596fd73380b818dc300'

效果图JSimport React, { useEffect, useState, Fragment } from 'react';import styles from './style.less'import z from '@/assets/deg/c.png';const index = () =>{ const [count, setCount] = useState(3) const strData = '1,2,3,4,5,6,7' let a =

效果图JSimport React, { useEffect } from 'react';import styles from './style.less'const contentStyle = { fontSize: '20px', position: 'relative', width: '230px', height: '100px', overflow: 'hidden', display: 'flex', flexDirect

效果图JS// 能源节能-群智能能源优化算法 ~ 臧小川import React, { useState, Fragment, useRef } from 'react';import styles from './style.less';const centerData = [ { id: 1, src: 'https://blog.youkuaiyun.com/chuan0106', name: '供需匹配优化算法', img:

效果图入口 Indeximport React, { useState } from 'react';import styles from './style.less'import Header from './component/Header'import List from './component/List'import Footer from './component/Footer'const index = () =>{ const [toDos, setToDos

效果图JSimport React, { useEffect, useState, useRef } from 'react'import { message } from 'antd';import styles from './style.less'const contentStyleShow = { transform: 'translateX(80%)'}const contentStyleHide = { transform: 'translateX(0%)'}

效果图下载npm install @better-scroll/movable --save// oryarn add @better-scroll/movableJSimport React, { useEffect, useRef, useState } from 'react'import styles from './style.less'import { BS } from './utils/index'const index = () =>{ useEf

效果图JSimport React, { useState } from 'react'import styles from './style.less'const contentStyle = { color: '#fc5531'}const yus = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a5596fd73380b818dc300'const gy = 'https://www.da

效果图indeximport React from 'react'import styles from './style.less'import { LeftOutlined, RightOutlined } from '@ant-design/icons';const contentStyle = { // 是背景渐变 而不是给文字添加颜色 所需要的属性 cursor: 'pointer', WebkitBackgroundClip: 'text', WebkitTe

<div className={`${styles.yus} ${styles.littleLord}`} ></div>

前言：怎么每天都能遇到这么奇奇怪怪的问题。当有这种想法的时候还是证明自己实力太差了，需要提升的还有很多呀！事情是这样的 需要做一个的表单提交需求 提交成功与失败都有个提示？心想 这还不简单 把要传递的参数传给后台 然后给我个返回值 我拿着返回值判断不就OK了 想到这样我就开始做了)先把大致写出来Indeximport React from 'react'import { Form, Input, Button, Select } from 'antd';const { Option } =

JSimport React, { useEffect, useState } from 'react'import styles from './style.less'import { Progress } from 'antd';import { ReconciliationOutlined } from '@ant-design/icons';const data = [ { name: '北京市', people: 1560 }, { name: '河北省', peopl.

JSimport React, { useState } from 'react'import styles from './style.less'import { Button } from 'antd';import { PauseOutlined, CaretRightOutlined } from '@ant-design/icons';const Index = () =>{ const [buttonData, setButtonData] = useState([.

import React, { useState, useEffect } from 'react'import styles from './style.less'const data = [ { name: '夜曲', vid: 'BV1tA411q7xi' }, { name: '以父之名', vid: 'BV1mp4y1C7ja' }, { name: '晴天', vid: 'BV1Ag4y1q7tP' }, { name: '七里香', vid: 'BV1AA.

JSimport React, { useEffect, useState } from 'react'import styles from './style.less'import { Progress } from 'antd';import { ReconciliationOutlined } from '@ant-design/icons';const data = [ { name: '北京市', people: 1560 }, { name: '河北省', peopl.

JSimport React from 'react'import styles from './style.less'import { AntCloudOutlined, AccountBookOutlined } from '@ant-design/icons';import { Carousel } from 'antd'const data = [ { name: '羽神', money: -20000, wage: 6000, consume: 7000 }, { na.

JSimport React, { useState, useEffect, useRef } from 'react'import styles from './style.less'import { RestOutlined, RedditOutlined } from '@ant-design/icons'import { DS } from './utils/index'const data = [ { event: '向女神表白被拒', location: '钱柜KTV', s.

JSimport React, { useState, useEffect } from 'react'import styles from './style.less'import { Slider } from 'antd';import { PlusOutlined, MinusOutlined } from '@ant-design/icons';const end = 1440 // 总长度const stepCount = 60 // 步长// const marksPara.

indeximport React from 'react'import styles from './style.less'const colorList = [ { id: 1, color: '#41A9CC', }, { id: 2, color: '#236FCC', }, { id: 3, color: '#5858CC', }, { .

indeximport React from 'react'import styles from './style.less'import { Slider } from 'antd';const data = [ { height: 148.9, name: '羽神', money: 250, }, { height: 159, name: '少主', money: 189,.

indeximport React from 'react'import styles from './style.less'import { Carousel } from 'antd'; // 走马灯const data = [ { name: '羽神天下第一' }, { name: '少主天下第二' }, { name: '刘备啥也不是' }, { name: '赵老威后陈老大' }, { name: '陈笑楠铜锣湾扛把子' }, { nam

JSimport React, { useRef, useEffect, useState, Fragment } from 'react'import styles from './style.less'import { BS, DS, debounce } from './utils/index'import { Select } from 'antd';const { Option } = Selectconst index = () =>{ const [rollingA

npm install @better-scroll/core --save// oryarn add @better-scroll/core

import React, { useState, useEffect, Fragment } from 'react'import styles from './style.less'import 'animate.css';// 视频const dataS = [ { id: 1 }, { id: 2 }, { id: 3 },]// 圆点const currentPageIndex = [ { id: 1 }, { id: 2 }, { i