![](https://img-blog.csdnimg.cn/20201209105808414.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React Hook
React Hook 钩子
马优晨
生活中的打击和挫折远比想象的更多,有时灾难又会让你的一切努力白费,也许明天我们就会死去,但如果我们还活着,在面对着种种不公和无奈过后,“明天的明天的明天,你是否会依然爱着这个世界。” 我想我会.......................
展开
-
什么是 Hooks,React Hooks简单使用
Hooks 译为钩子,Hooks 就是在函数组件内,负责钩进外部功能的函数。React 提供了一些常用钩子,React 也支持自定义钩子,这些钩子都是用于为函数引入外部功能。当我们在组件中,需要引入外部功能时,就可以使用 React 提供的钩子,或者自定义钩子。比如在组件内引入可管理 state 的功能,就可以使用 useState 函数,下文会详细介绍 useState 的用法。通过自定义 Hooks,可以将组件逻辑提取到可重用的函数中。名称以 “use” 开头;函数内部调用其他的 Hook。原创 2023-07-03 14:32:01 · 2980 阅读 · 0 评论 -
使用hooks解决多页面数据共用问题
使用上面的hooks将返回调用lightVersion函数返回的数据;在utils文件夹中创建一个 hooks用于存放hooks的文件。这里我们创建一个useLightVersion.ts文件。上图为lightVersion函数返回的数据;使用store存储数据,需要每个页面调用。使用localStorage存储全局。疯转hooks变成公共方法以供调用。那么在页面中使用就很简单了,如下。一个公共的数据在多页中使用?原创 2023-02-15 15:57:37 · 472 阅读 · 0 评论 -
react hook计时
在页面进入时开始计时,离开页面时停止计时,并记录页面停留时长。原创 2022-12-16 17:22:29 · 154 阅读 · 0 评论 -
react组件之间重用状态
有时候我们会想要在组件之间重用一些状态逻辑。目前为止,有两种主流方案来解决这个问题:高阶组件和render props。但是这里我们讲一种自定义hook的方式: 首先,我们把公用逻辑抽取到一个叫做useFriendStatus的自定义 Hook 里: useFriendStatus组件import React, { useState, useEffect } from 'react';function useFriendStatus(friendID) {...原创 2021-11-03 15:14:10 · 304 阅读 · 0 评论 -
react封装子组件弹框
{/* 协议弹框 */} <Protocol visible={visible} register={ async (tick) => { setVisible(false); if(tick){ setSwitchChecked(true); setAlertShow(true); setTimeout(()=>{ .原创 2021-06-15 19:27:03 · 621 阅读 · 0 评论 -
React Hook “useState“ is called in function xx which is neither a React function component or
如上图报错信息:问题就出现在函数的取名,函数名首字母要大写 我的函数名是slider 改为Slider就不会报错了;原创 2020-12-09 10:55:49 · 1994 阅读 · 0 评论