什么网站模板,个人h5第三方支付接口,营销型网站架构,phpcms v9网站搬站之后掉出来的文章链接显示为以前网站域名目录 1#xff0c;介绍2#xff0c;简单举例2.1#xff0c;获取数据1.2#xff0c;计时器 2#xff0c;自定义 HOOK 相比类组件 1#xff0c;介绍
将一些常用的#xff0c;跨组件的函数抽离#xff0c;做成公共函数也就是 HOOK。自定义HOOK需要按照HOOK的规则来实现介绍2简单举例2.1获取数据1.2计时器 2自定义 HOOK 相比类组件 1介绍
将一些常用的跨组件的函数抽离做成公共函数也就是 HOOK。自定义HOOK需要按照HOOK的规则来实现才能像 useEffect 一样的使用。 可以看到和项目中常用的工具方法 utils 类似不同的是自定义HOOK 通常与业务强相关。 规则
函数名必须以 use 开头其他函数组件调用自定义HOOK函数时应该放到顶层。 注意自定义HOOK 函数和函数组件的区别要将函数当做组件来使用函数名首字母必须大写。 2简单举例
2.1获取数据
import { useEffect, useState } from react;export const useList () {const [list, setList] useState([]);useEffect(() {(async () {const res await getFakerList();setList(res);})();}, []);return list;
};const getFakerList () {return new Promise((resolve) {setTimeout(() {resolve([1, 2, 3]);}, 1000);});
};使用
import React from react;
import { useList } from ./hooks;
export default function App() {const list useList();const li list.map((m) li key{m}{m}/li);return ul{li}/ul;
}整体执行顺序
函数组件调用 useList 函数 执行 useEffect 副作用函数请求接口获取数据。返回状态变量 list此时获取的是空数组。 useEffect 副作用函数使用立即执行函数的原因 想使用 await 关键字但 useEffect 的第一个参数有要求如果有返回则必须是普通函数所以不能把 async 关键字加到它上面。 type EffectCallback () (void | (() void | undefined));当模拟接口获取到数据会更新状态变量 list触发更新。所以 App.js 中会获取更新后的值渲染到页面。 可以将 useList 的函数体看做是在 App.js 中也就是说声明的状态其实放到了 App 函数组件中。 所以其实是 App 函数组件重新渲染触发了 useList 函数重新调用。 1.2计时器
import { useEffect } from react;export const useTimer (func, duration 1000) {useEffect(() {const timer setInterval(func, duration);return () {clearInterval(timer);};}, []);
};使用时只需要关心要执行的内容即可。
import React from react;
import { useTimer } from ./hooks;export default function App() {useTimer(() {console.log(计时器的内容);});return div测试/div;
}2自定义 HOOK 相比类组件
可以看到通过HOOK实现的公共逻辑如果在类组件中实现会比较繁琐甚至会有到高阶组件才能实现。 而高阶组件虽然增强了类组件的功能但带来了一些问题比如 ref 转发属性传递等并且组件的嵌套层级也比较多远不如 HOOK 来的方便。 以上。
