自定义 Hooks 和普通函数有什么区别？
- 自定义 hooks可以看做是 React Hooks 的之外的自由延伸。本质上还是 JavaScript 函数。主要用途是实现逻辑重用。
- 与普通函数的区别
- 名字应该始终以 use 开头。
- 在自定义 Hook 中调用其他 Hook。
创建自定义hook
- 需求：
- 日期选择器，需要设置可选日期范围，超出1天~10天的范围不可选择。
- 选择某个日期之后，需要计算跟当天日期相差的天数，并回显到页面上。
- 可复用逻辑
- 日期选择器的可选限制
- 时间发生变化的回调函数
- 相差天数变量。
- 代码
/**
* @description 时间选择器的限制和相差天数
*/
import React, { useState, useCallback, useMemo } from 'react';
import moment from 'moment';
const useDateRange = (textButton) => {
// 相差天数
let [dayDiff, setDayDiff] = useState(0);
/**
* 可选时间范围 1~10
*/
const disabledDate = useCallback(current => {
const startTimer = moment()
.add(+1, 'days')
.startOf('day');
const endTimer = moment()
.add(+10, 'days')
.endOf('day');
return current && (current < startTimer || current > endTimer);
}, []);
// 测试
const onOpenChange = useCallback(open => {
console.log(open,'open3')
textButton()
},[])
/**
* 时间选择器选择操作 获取相差天数
*/
const dateChange = useCallback(dates => {
let nowDate = new Date();
let startData = moment(nowDate).format('YYYY-MM-DD');
let endData = moment(dates).format('YYYY-MM-DD');
dayDiff = moment(endData).diff(moment(startData), 'day');
setDayDiff(dayDiff);
}, []);
return { dayDiff, disabledDate, dateChange, onOpenChange };
};
export default useDateRange;
使用 useDateRange
/**
* @description 日期选择页
*/
import React from 'react';
import { DatePicker } from 'antd';
import useDateRange from './hooks/useDateRange';
const ChangeDatePage = () => {
// 测试方法
const textButton = () => {
console.log('first')
}
// 使用自定义 Hook
const { disabledDate, dateChange, dayDiff } = useDateRange(textButton);
return (
<div>
<DatePicker disabledDate={disabledDate} onChange={dateChange} onOpenChange={onOpenChange}/>
<div className="mt20">选择的日期与今天相差: {dayDiff} 天</div>
</div>
);
};
export default ChangeDatePage;
总结
在转载的文章中，自己尝试了添加组件onOpenChange方法，和函数组件重复利用很类似，但功能上使用了react本身的hook,对于逻辑拆分功能更强
自己往自定义hook传了一个textButton方法，需要声明到使用前，有类似触发按钮后弹窗的需求
