The source code that everyone can understand (1) the overall architecture of ahooks

This article is the first in a series of in-depth ahoos source code articles, which have been organized into document- address . I think it's not bad, give a star to support it, thanks.

The first part mainly introduces the background and overall architecture of ahooks.

React hooks utils library

Since the introduction of React hooks in React 16.8, more and more projects are using Function Component. The React hooks utils library was born, and it mainly solves two problems as follows:

• Abstraction of public logic.
• Solve the shortcomings of React hooks, such as closures.

So what are the better React Hooks utils libraries in the community?

react-use is a relatively active React hooks utils library in the community, and its star number has reached 29.6k . It is very powerful and has 100+ hooks. If you need more complete functions, you can consider choosing react-use.

If you don't need very complete functions, but only some common functions, react-use may be a little redundant. You can consider our protagonist today - ahooks , its current star number is 10k (2022.08 .10), which is considered a relatively active community.

ahooks

Introduction

The official introduction is as follows:

ahooks, pronounced [eɪ hʊks], is a high-quality and reliable React Hooks library. In the current development process of the React project, a set of useful React Hooks library is essential, I hope ahoos can become your choice.

Features

It has the following characteristics:

• Easy to learn and use.

• SSR is supported.

  • Put the method of accessing the DOM/BOM in useEffect (the server will not execute it) to avoid errors when the server executes.
  • You can see a lot of judgments in the source code isBrowser , mainly to distinguish the browser environment and the server environment.

• The input and output functions are handled specially, and the closure problem is avoided.

  • The input function always uses the latest copy. This is achieved by useRef .
  • The output function and address will not change. This is realized by useMemoizedFn (packaged by ahoos), and its internal implementation is also realized by useRef . We will mention it later.
• Contains a lot of advanced Hooks distilled from the business.
• Contains rich basic Hooks.
• Built with TypeScript, providing full type definition files. You can learn some TypeScript tricks.

type of hooks

ahooks provides commonly used Hooks based on UI, SideEffect, LifeCycle, State, DOM and other categories. As follows:

ahooks overall architecture

Project begining

Let's start by following a copy from ahooks and clone it. (I still used yarn when I followed, but now I should use pnpm, guess it's performance related).

 yarn run init
yarn start

If you can successfully run the service, you will see the exact same page as the official documentation.

the whole frame

The following information is available from package.json in the root directory of the repository.

• Documentation is using dumi . It is a documentation tool for component development scenarios.
• The project is a monoRepo . Its project management is managed through lerna .
• Unit testing is implemented through jest.

In its directory structure, you can see that the public documents of the warehouse are stored in docs. Two packages are stored in packages, hooks and use-url-state. The overall structure is similar to that of the lerna project given in dumi. Each component under each package can write corresponding documents. The difference is that each component in hooks has more __tests__ folder, which is used to write unit tests.

The following picture can be used to roughly summarize the engineering architecture of ahooks:

hooks

Just mentioned, ahoos adopts the method of monoRepo . Our source code is in packages. Let's take a look at hooks. Look first packages/hooks/package.json . In addition, to use the useUrlState hook, you need to install @ahooksjs/use-url-state independently, and its source code is in packages/use-url-state . I understand that the official intention should be that this library depends on react-router. There may be some projects that do not need to use it. Bringing it up will help reduce the size of the package.

 npm i @ahooksjs/use-url-state -S

Back to packages/hooks . Focus on dependencies and peerDependencies. It can be seen that in fact, it still uses some other tool libraries, such as lodash (mainly to avoid repeated wheel building, but I feel that this will cause the package to become larger). We will also explore these tool libraries later.

 "dependencies": {
  "@types/js-cookie": "^2.x.x",
  "ahooks-v3-count": "^1.0.0",
  "dayjs": "^1.9.1",
  "intersection-observer": "^0.12.0",
  "js-cookie": "^2.x.x",
  "lodash": "^4.17.21",
  "resize-observer-polyfill": "^1.5.1",
  "screenfull": "^5.0.0"
},
"peerDependencies": {
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
},

Also explain peerDependencies.

peerDependencies的目的是提示宿主环境去安装满足插件---2f1bbd590bbd215a98316976d2213a55 peerDependencies所指定依赖的包， import 74008946c254a34ccfc23ba50c50b7f4---或者require When the package is installed, it will always refer to the unified installation of the host environment npm package, and finally solve the problem of inconsistency between the plug-in and the package it depends on. The host environment here generally refers to our own project itself.

This is very important for packaging npm packages. When the package a you write depends on another package b, and the package b is a common package that refers to the business of the package a, it is recommended to write it in peerDependencies to avoid repeated downloads/multiple versions coexist.

Summarize

As the first part of the series, I introduced the background of the React hooks utils library and the characteristics and overall structure of ahoos. Next, I will explore the implementation of various common hooks methods, so stay tuned.

refer to

• ahooks is officially released: a library of React Hooks worth embracing