``sh`
$ npm install @halofe/rax-hooks --save
##### useMounted
组件挂载时触发一次, 等价于 componentDidMount;
`js
import { useMounted } from "@halofe/rax-hooks";
useMounted(() => {
console.log("only triige on component mounted");
});
`
##### useUnmount
组件卸载时触发, 等价于 componentDidUnmount;
`js
import { useUnmount } from "@halofe/rax-hooks";
useUnmount(() => {
console.log("only triige after component destroyed");
});
`
##### useUpdate
组件更新时触发,首次挂载不触发, 等价于 componentDidUpdate;
`js
import { useMounted } from "@halofe/rax-hooks";
useUpdate(() => {
console.log("trigger on component didUpdate");
});
`
##### useBoolean
true or false 相互切换, 返回元祖 [value, setValueTruthy, setValueFalsy]
`js
import { useBoolean } from "@halofe/rax-hooks";
const [popupShow, openPopup, closePopup] = useBoolean(false);
`
##### useDerivedState
从入参参数获取一个衍生态,可以单独设置状态,当外部入参更新,会自动更新内部的状态
一参等价于一个依赖,当外部依赖变化可以触发内部 state 更新
二参为一个同步处理器,可以对值进行同步的转换处理;
三参为额外依赖变化项, 接受数组, 一参默认是依赖数组的首个,默认不需要传递
`js
import { useMounted } from "@halofe/rax-hooks";
// count为父级组件传入的props属性,当父组件props.count变化,内部自动更新
const [derivedCount, setDerivedCount] = useDerivedState(count, (k) => !!k, [
"dep2",
"dep3",
]);
`
##### useFlexibleImage
获取图片真实宽高,根据入参比例自适应宽度
一参为初始默认宽高, 算出图片宽高比例因子 \* 初始默认宽高
`js
import { useFlexibleImage } from "@halofe/rax-hooks";
/**
* ref: 挂载到Rax组件Image实例上面;
* loadCallback: 挂载到Rax的Image的onLoad回调上面
* iconWidth: 动态的宽度适配值
*/
const { ref, loadCallback, iconWidth } = useFlexibleImage(180);
`
##### useSelect
checkBox 选择器钩子
支持: 单选, 必选, 多选, 全选四种模式
`js
import { useSelect } from '@halofe/rax-hooks';
const {
selectList, // 返回内部状态的列表, 视图映射使用此列表
allChecked, // 是否全部选中,内部子项目选中态会根据此值动态演化, 选填, 默认: false
select, // 单个item选中方法, 会根据当前状态自动切换
selectAll // 全选, 需要传入选中态
} = useSelect({
list // 初始状态列表, 内部会根据此列表动态演化出新的列表 数组类型
compareKey, // 当item被点击, 判断数组中item变化匹配的唯一key, 选填, 默认: 'id'
disableKey, // 当item被点击, 判断item是否禁用态的唯一key, 禁用态下不可点击, 选填,默认不比较
checkKey, // 当item被点击, 重新赋值的选中态的唯一key, 选填, 默认: 'isChecked'
compatibilityBoolean, // 是否开启选中态布尔值兼容模式, 开启后选中态使用'true' | 'false' 选填, 默认true
singleChoice, // 是否开启单选模式, 单选模式下仅有一个item选中态为true, 选填 默认: true
required, // 单选模式开启后, 是否item必选, 防止必填项为空, 仅在单选模式下生效 选填 默认 true
});
`
##### useWindowInfo
获取屏幕视口宽度,高度和 dpr
小程序中不包含原生 titleBar 的高度,也就是页面可用高度
`js
import { useWindowInfo } from "@halofe/rax-hooks";
const { windowWidth, windowHeight, dpr } = useWindowInfo();
`
##### useElementBoundingClientRect
获取节点样式
一参传入元素的唯一 className;
微信小程序限制, 组件内获取样式必须获取组件实例,在 Rax 中获取比较复杂,当前只兼容 className 获取方案;
`js
import { useElementBoundingClientRect } from "@halofe/rax-hooks";
/**
* 因为三端返回不统一,尽量使用交集,下面解构列举
*/
const {
width,
height,
left,
top,
bottom,
right,
} = useElementBoundingClientRect("title");
`
##### usePaging
翻页组件
支持自动翻页,重置翻页
这个 hook 当前模式基于奥创的翻页构建,非传统通用性翻页
`js
import { usePaging } from "@halofe/rax-hooks";
const {
list, // 内部构件状态后的列表
isLastPage, // 是否翻页到底
getNextPage, // 获取翻页数据
refreshPage, // 重置翻页数据, 适合Tab切换触发的列表更新
} = usePaging({
list: [], // 初次列表数据, 后续新增数据替换此list进行自动合并;
total: 100, // 数据总条数
totalPage: 10, // 数据总页数, 非必传, 不传会根据total / pageSize向上取整计算;
pageSize: 10, // 每页数据数量
pageNo: 1, // 当前页数, 数据更新后务必更新此项
fetchNext({
pageNo,
total,
totalPage,
pageSize,
isRefresh /是否为更新模式/,
}) {
// 获取最新数据, 将入参传入的list数据直接改为下一页数据
// 内部会对数据进行拼接操作
// 当list改变, pageNo页需要进行变更操作
// 此函数不需要返回最新数据
},
dataProcessor: (item, index) => item, // 数据列表处理器, 如果数据item需要进行二次转化, 可以传递此函数, 非必传,默认 identity;
});
`
``