React
文章平均质量分 57
是草莓味的啊
这个作者很懒,什么都没留下…
展开
-
React hooks - useReducer
从 use-immer 中导入 useImmerReducer 函数,并替换掉 React 官方的 useReducer 函数的调用。修改 reducer 函数中的业务逻辑,case 代码块中不需要 return 新对象了,可在 prevState 上进行修改。因为 Immer 内部会复制并返回新对象。原创 2024-05-23 19:11:10 · 523 阅读 · 0 评论 -
React hooks - useLayoutEffect
因为点击按钮时,num 更新为 0,但此时页面不会渲染,而是等待 useLayoutEffect 内部状态修改后才会更新页面,所以不会出现闪烁。将useEffect改成useLayoutEffect后数字不再闪烁。原创 2024-05-23 09:41:16 · 671 阅读 · 0 评论 -
React hooks - 自定义hooks
自定义封装鼠标位置的 hook自定义封装秒数倒计时的 hook在 src 目录下新建 hooks/index.ts 模块,自定义hooks都写在这里,自定义hooks都以use开头const [position, setPosition] = useState({ x: 0, y: 0 }) // 鼠标的位置if(timeId!}, delay)}, [])return position // 返回鼠标的位置。原创 2024-05-23 09:38:33 · 546 阅读 · 0 评论 -
React hooks - useEffect
/ 第二个参数是可选的依赖项数组,这个数组中的每一项内容都会被用来进行渲染前后的对比,依赖项发生变化时,才会重新执行副作用函数。将中止信号与请求绑定:fetch( ‘请求路径’ , { signal: controller.signal })实际应用:当前组件中使用了定时器或绑定了事件监听程序,可以在返回的函数中清除定时器或解绑监听程序。如果不在组件卸载时清理定时器,下一次再显示时会再创建一个新的定时器,就会有两个定时器都打印位置。中止请求:controller.abort()原创 2024-05-23 09:35:37 · 612 阅读 · 0 评论 -
React hooks - forwardRef+useImperativeHandle
当向外暴露{ name: ‘liulongbin’, age: 22 }时,childRef.current为{ name: ‘liulongbin’, age: 22 }// 第二个参数是一个函数,子组件将自己内部的方法或值作为对象返回,并自动绑定到父组件定义的并传给子组件的 ref 上。// 第三个参数是函数依赖的值(可选),createHandle中用到的子组件内部定义的变量也需要作为依赖项。ref 用来获取实例,但函数组件不存在实例,所以ref无法获取函数式组件的实例。原创 2024-05-23 09:28:50 · 871 阅读 · 0 评论 -
React hooks - useRef
useRef 函数返回一个可变的 ref 对象,该对象只有一个 current 属性。可以在调用 useRef 函数时为其指定初始值。并且这个返回的 ref 对象在组件的整个生命周期内保持不变。原创 2024-05-23 09:24:52 · 571 阅读 · 0 评论 -
React hooks - useState
在hooks出现之前,react的函数式组件也叫做无状态组件(函数里面无法创建属于自己的状态,只能使用props接收)一个管理状态的 hooks,能让函数组件拥有自己的状态,实现状态的初始化、读取、更新。原创 2024-05-23 09:21:57 · 374 阅读 · 1 评论