本文主要是介绍react 进阶必学 hook (四):自定义hook,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
系列文章传送门:
react 进阶必学 hook (一):useState 来一碗大碗宽面
react 进阶必学 hook (二):useEffect 专治不吃宽面
react 进阶必学 hook (三):useContext 面馆分店开张了
react 进阶必学 hook (四):自定义hook
react 进阶必学 hook (五):额外的hook
什么是自定义hook
官网原话如下:
自定义 Hook 是一个函数,其名称以 “
use
” 开头,函数内部可以调用其他的 Hook,自定义 Hook 是一种自然遵循 Hook 设计的约定,而并不是 React 的特性
自定义hook有一下特性或是约定:
- 自定义hook中可以调用其他hook
- 必须以use开头,就像组件必须以大写字母开头一样
- 自定义hook中管理state也是使用useState、useEffect,因为useState在调用的时候就是完全独立的
自定义hook解决了什么问题
想必开发人员对utils文件夹都很熟悉,在开发的时候我们会把经常使用的一些方法函数放到utils文件夹中,因为这些逻辑方法的复用率很高;同样自定义hook也是解决类似的问题。
React的组件思想其实就是一种将代码复用的做法,然而在编写组件的过程中又有一些逻辑是可以复用的,但是这些逻辑不需要在ui上展示或是有些组件不能在更细的拆分,因此我们可以将这些逻辑抽象成自定义hook,和组件的抽象不是一个纬度,就像抽象工厂模式;这种功能的抽象,严格控制输入输出,还有点函数式编程的思想,自定义的hook我们可以在不同的组件中使用,就像utils中的方法一样。
面馆例子
react 进阶必学 hook (三):useContext 面馆分店开张了中我们添加了一个统计一共卖出多少面的需求,每一个面馆卖出一碗面后都做了两个动作:
- 自己面馆的
counter
显式加一 - 面馆总计的
counter
显式加一
代码如下:
const [count, setCount] = useState(0); const {counter, add} = useContext(context)useEffect(() => { add()return window.alert(`一共卖出${counter}碗💪💪💪💪`)}, [count])
其中 const [count, setCount] = useState(0);
是本面馆的counter,add()
控制的是上下文中的总计的counter,两个是分开的,但是仔细想一下,这两个过程其实是严格绑定的,如果添加其他面的品类,添加新的逻辑就会分散导致不好维护,因此可以将这个逻辑写成一个hook。
1. 创建自定义hook
我们先创建一个自定义hook,命名为useCounter
,因为要求必须以use开头:
export default function useCounter(initialState) {const [count,
这篇关于react 进阶必学 hook (四):自定义hook的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!