react
文章平均质量分 56
学习react
花满樱❀
这个作者很懒,什么都没留下…
展开
-
在React中使用防抖节流
在React中使用防抖节流 防抖和节流 先来介绍一下防抖和节流 防抖:事件触发后延迟n秒在执行,如果在这n秒内再次触发则重新计时。即在一段时间内只允许事件执行一次,常用于表单提交,输入框防抖 节流:事件触发后延迟n秒在执行,并且在这n秒内再次触发事件时不允许执行。即减少一段时间内事件触发的频率,常用与监听滚动条滚动,鼠标移动,窗口大小变化 依据上面的定义可以手写一个防抖和节流 防抖: const debounce = (fn, delay) => { let timer return原创 2021-11-22 21:49:27 · 2948 阅读 · 3 评论 -
React.memo、useMemo、useCallback的用法
React.memo、useMemo、useCallback的用法 这三个API通常都是在优化组件的时候使用,并且他们的原理都是类似于vue的计算属性的缓存机制,依赖项没有发生过变化,直接拿到之前求得的结果不会在执行函数;也可以说是基于记忆化函数的原理,记忆化函数:也就是当前输入的参数如果之前已经求过结果,那么便不再重新执行,而是直接输出之前的结果 先看代码 父组件只要任意一个 state 被更新了 都会执行组件函数被重新渲染,从而导致 子组件 son 也会被从新渲染 即使子组件没有依赖父组件的 stat原创 2021-08-05 14:53:31 · 352 阅读 · 0 评论 -
react组件通信的方式
父子组件通信 父子通信 父组件向子组件传值,通过 props的方式,在子组件身上绑定一个自定义属性将值传递给子组件 子组件向父组件传值,也是通过 props的方式,在子组件身上绑定一个自定义属性并将可以修改父组件状态的函数传递给子组件, 然后子组件通过调用这个函数就可以将值传递给父组件 父组件 import { useState } from 'react' import Son from './son' const Father2 = () => { const [count, setCo原创 2021-08-04 20:44:20 · 91 阅读 · 0 评论