关于typescript:③reactahooks源码分析之useUrlState

剖析的源码来自https://github.com/alibaba/ho…

useUrlState

简介

useUrlState是一个通过url query来治理state的Hook。url query,即网页url的问号前面跟着的一串属性值。该hook利用次要在以下两个方面:

  • 将组建的属性值晋升到url进行治理。
  • 利用该hook来治理url的query。

useUrlState能够做到不刷新页面即可扭转query参数,应用起来比拟不便。

useUrlState有个比拟非凡的中央在于:应用它是须要独立装置@ahooksjs/use-url-state库的,源码中它也与其余hook寄存在了不同的地位。可能是因为useUrlState须要应用react-router和query-string,因而按需下载,防止无意义的多下载几个库。

根本用法

它的用法比较简单,同useSetState相似,初始值都为对象中的键值对;应用如setState(即result的第二个参数)传入须要扭转的键值对即可,也可传入函数;不同之处在于无奈减少属性值。

简略用例

该用例来自官网文档,实现了其根本用法:将状态同步到 url query 中。而后通过设置值为 undefined,能够将属性复原为一开始传入的默认值。

import React from 'react';
import useUrlState from '@ahooksjs/use-url-state';

export default () => {
  const [state, setState] = useUrlState({ count: '1' });

  return (
    <>
      <button
        style={{ marginRight: 8 }}
        type="button"
        onClick={() => setState({ count: Number(state.count || 0) + 1 })}
      >
        add
      </button>
      <button type="button" onClick={() => setState({ count: undefined })}>
        clear
      </button>
      <div>state: {state?.count}</div>
    </>
  );
};

源码剖析

首先是一些接口和类型的定义。

//...省略局部

const rc = tmp as any;

//options参数接口:
export interface Options {
  navigateMode?: 'push' | 'replace';//状态变更时切换 history 的形式
  parseOptions?: ParseOptions;//query-string parse 的配置
  stringifyOptions?: StringifyOptions;//query-string stringify 的配置
}

//parseOptions的默认定义
const baseParseConfig: ParseOptions = {
  parseNumbers: false,
  parseBooleans: false,
};

//stringifyOptions的默认定义
const baseStringifyConfig: StringifyOptions = {
  skipNull: false,
  skipEmptyString: false,
};

//定义类型UrlState为<string, any>键值对
type UrlState = Record<string, any>;

对传入的参数进行了肯定的默认值合并解决,接着获取以后url的location对象,获取传入的心state值,辨别react-router的5或6版本来对新旧state值进行合并。

对步骤的具体解析写于代码中的正文局部。

const useUrlState = <S extends UrlState = UrlState>(
  initialState?: S | (() => S),
  options?: Options,
) => {

  type State = Partial<{ [key in keyof S]: any }>;
  const { navigateMode = 'push', parseOptions, stringifyOptions } = options || {};

  const mergedParseOptions = { ...baseParseConfig, ...parseOptions };
  const mergedStringifyOptions = { ...baseStringifyConfig, ...stringifyOptions };

//useLocation返回示意以后页面的location对象。location对象蕴含无关以后 URL 的信息。
//上面用到的有:search、hash

  const location = rc.useLocation();

  // react-router v5
  const history = rc.useHistory?.();
  // react-router v6
  const navigate = rc.useNavigate?.();

//起到强制组件从新渲染的作用
  const update = useUpdate();

  const initialStateRef = useRef(
    typeof initialState === 'function' ? (initialState as () => S)() : initialState || {},
  );

//当location.search扭转的时候,将url的query转换成对象
//在本系列上一篇文章中曾经解释过useMemo的作用,有选择性地进行从新执行,缩小耗费。
  const queryFromUrl = useMemo(
    () => {
    return parse(location.search, mergedParseOptions);
  }, [location.search]);

//当queryFromUrl扭转的时候,返回目前的query值
  const targetQuery: State = useMemo(
    () => ({
      ...initialStateRef.current,
      ...queryFromUrl,
    }),
    [queryFromUrl],
  );

//获取传入的newstate值,并且反对传入函数
  const setState = (s: React.SetStateAction<State>) => {
    const newQuery = typeof s === 'function' ? s(targetQuery) : s;

    // 1. 如果 setState 后,search 没变动,就须要 update 来触发一次更新。
    // 2. update 和 history 的更新会合并,不会造成屡次更新。
    update();
    if (history) {
      history[navigateMode]({
        hash: location.hash,
        //合并新旧state,并利用stringify进行转换
        search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
      });
    }
    if (navigate) {
      navigate(
        {
          hash: location.hash,
          search: stringify({ ...queryFromUrl, ...newQuery }, mergedStringifyOptions) || '?',
        },
        {
          replace: navigateMode === 'replace',
        },
      );
    }
  };

  return [targetQuery, useMemoizedFn(setState)] as const;
};

export default useUrlState;

要点剖析

useLocation

useLocation返回示意以后页面的location对象。location对象蕴含无关以后 URL 的信息。
在该源码应用到的是hash和search信息。

  • hash:=从井号 (#) 开始的 URL(锚)。该源码中间接获取了以后url的hash值,并未扭转。
  • search:=从问号 (?) 开始的 URL(查问局部),相当于query,也就是useUrlState重点解决的局部。

useUpdate

一个能够强制组件渲染的hook,用法极其简略, const update = useUpdate();而后update();即可。

parse, stringify

来自query-string库,作用是将对象和url的query(如‘?name=abc&class=2’)这两种格局进行相互转换。

useRef

useRef 返回一个可变的 ref 对象,其.current属性被初始化为传入的参数(initialValue),能够用来保留数据,返回的ref对象在组件的整个生命周期内继续存在。在这里用它来保留传入的初始值(以便当革除某个属性的时候,能够返回该属性的初始值)

参考资料:
https://cloud.tencent.com/dev…
https://react.docschina.org/d…

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据