@halofe/rax-hooks

@halofe/rax-hooks

Install

$ npm install @halofe/rax-hooks --save

Usage

useMounted

组件挂载时触发一次, 等价于 componentDidMount;

import { useMounted } from "@halofe/rax-hooks";

useMounted(() => {
  console.log("only triige on component mounted");
});

useUnmount

组件卸载时触发, 等价于 componentDidUnmount;

import { useUnmount } from "@halofe/rax-hooks";

useUnmount(() => {
  console.log("only triige after component destroyed");
});

useUpdate

组件更新时触发,首次挂载不触发, 等价于 componentDidUpdate;

import { useMounted } from "@halofe/rax-hooks";

useUpdate(() => {
  console.log("trigger on component didUpdate");
});

useBoolean

true or false 相互切换, 返回元祖 [value, setValueTruthy, setValueFalsy]

import { useBoolean } from "@halofe/rax-hooks";

const [popupShow, openPopup, closePopup] = useBoolean(false);

useDerivedState

从入参参数获取一个衍生态,可以单独设置状态,当外部入参更新,会自动更新内部的状态
一参等价于一个依赖,当外部依赖变化可以触发内部 state 更新
二参为一个同步处理器,可以对值进行同步的转换处理; 三参为额外依赖变化项, 接受数组, 一参默认是依赖数组的首个,默认不需要传递

import { useMounted } from "@halofe/rax-hooks";

// count为父级组件传入的props属性,当父组件props.count变化,内部自动更新
const [derivedCount, setDerivedCount] = useDerivedState(count, (k) => !!k, [
  "dep2",
  "dep3",
]);

useFlexibleImage

获取图片真实宽高,根据入参比例自适应宽度
一参为初始默认宽高, 算出图片宽高比例因子 * 初始默认宽高

import { useFlexibleImage } from "@halofe/rax-hooks";

/**
 * ref: 挂载到Rax组件Image实例上面;
 * loadCallback: 挂载到Rax的Image的onLoad回调上面
 * iconWidth: 动态的宽度适配值
 */
const { ref, loadCallback, iconWidth } = useFlexibleImage(180);

useSelect

checkBox 选择器钩子
支持: 单选, 必选, 多选, 全选四种模式

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 的高度,也就是页面可用高度

import { useWindowInfo } from "@halofe/rax-hooks";

const { windowWidth, windowHeight, dpr } = useWindowInfo();

useElementBoundingClientRect

获取节点样式 一参传入元素的唯一 className; 微信小程序限制, 组件内获取样式必须获取组件实例,在 Rax 中获取比较复杂,当前只兼容 className 获取方案;

import { useElementBoundingClientRect } from "@halofe/rax-hooks";

/**
 * 因为三端返回不统一,尽量使用交集,下面解构列举
 */
const {
  width,
  height,
  left,
  top,
  bottom,
  right,
} = useElementBoundingClientRect("title");

usePaging

翻页组件
支持自动翻页,重置翻页
这个 hook 当前模式基于奥创的翻页构建,非传统通用性翻页

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;
});