- 博客(572)
- 资源 (12)
- 问答 (1)
- 收藏
- 关注
原创 animation-timeline: scroll()简单的横向滚动条
效果图 <div class="topBar"> <div class="line"></div> </div> <div class="box"> <p>里面是很多文字</p> <p>里面是很多文字</p> <p>里面是很多文字</p> <p>里面是很多文字&
2023-11-08 15:16:52
465
原创 大整数相加
const getMonth = () =>{ var dataArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份 for (var i = 0; i < 12; i++) { data.setMonth(data.getMonth() - 1); //每次循环
2023-03-13 16:53:18
121
原创 获取最近一年十二月份的月份
const getMonth = () =>{ var dataArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份 for (var i = 0; i < 12; i++) { data.setMonth(data.getMonth() - 1); //每次循环
2023-02-22 18:05:33
273
原创 自定义Hook-usePersistedState
import { useState, useEffect, useRef } from 'react'/** * 返回一个有状态的值,持久化在 localStorage 中,并有一个函数来更新它。 * @param {string} localStorage-Key * @param {string} localStorage-value * @return {value,setValue} value-新值 setValue-修改值的方法 */const usePersistedSta
2023-02-21 14:37:05
149
原创 自定义Hook-useHover
import { useState, useRef, useCallback } from 'react'const useHover = () =>{ const [isHovering, setIsHovering] = useState(false); const handleMouseOver = useCallback(() => setIsHovering(true), []); const handleMouseOut = useCallback(() => se
2023-02-21 11:50:22
288
原创 自定义Hook-useSearchParam
/** * 跟踪浏览器的位置搜索参数。 * @param {string} useSearchParam 传递参数 search 名称 * @return {string} useSearchParam 相应 search 值 */
2023-02-20 18:11:13
501
原创 自定义Hook-useLocalStorage
/** * 创建一个持久化到 localStorage 的有状态的值,并创建一个函数来更新它。 * @param {string} keyName:key * @param {string} defaultValue:初始值 * @return {Function} storedValue:本地存储值,setValue:修改值的函数,removeValue:清除函数 */
2023-02-20 16:15:49
536
原创 自定义Hook-useHash
import { useState, useEffect, useCallback } from 'react';const index = () =>{ const useHash = () => { const [hash, setHash] = useState(() => window.location.hash); const hashChangeHandler = useCallback(() => {
2023-02-16 17:58:36
134
原创 React图片懒加载
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
2023-01-29 11:50:40
586
原创 圆形导航栏
import { useState } from 'react';import styles from './style.less'const menus = [ { name: '文旅', id: 1, children: [ { name: '住房服务', id: 1 }, { name: '公共事业', id: 2 }, { name: '社保服务', id: 3 }, ] },
2022-12-07 17:16:27
456
原创 时钟啊时钟
/** * @color --color 父级定义颜色 css直接使用变量 */import { useState, useEffect } from 'react';import styles from './style.less'const index = () =>{ const [time, setTime] = useState({ hours: '00', minutes: '00', seconds: '00' })
2022-12-07 16:54:08
289
原创 React:useCallback
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)
2022-10-12 16:40:53
423
原创 React:useMemo
由于Hooks出来之后,我们可以采用函数组件创建复杂组件,但是失去了`shouldComponentUpdate`所以无法判断前后状态是否更新了。
2022-10-11 14:40:55
446
import from 得不到当前路径的其他文件 js除外 比如less 图片啥的
2021-11-03
TA创建的收藏夹 TA关注的收藏夹
TA关注的人