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

This article is in simple terms ahooks The first article in the source code series , The main goals of this series are as follows ：

• To deepen the React hooks The understanding of the .
• Learn how to abstract and customize hooks. Build your own React hooks Tool library .
• Cultivate the habit of reading and learning source code , Tool library is a good choice for reading source code .

notes ： This series is about ahooks The source code analysis of is based on v3.3.13. own folk A source code , It mainly interprets the source code , so details ^[1].

Part I main introduction ahooks The background and overall architecture of .

React hooks utils library

since React 16.8 Version launch React hooks, More and more projects use Function Component.React hooks utils The library was born , It mainly solves the following two problems ：

• The abstraction of common logic .
• solve React hooks The disadvantages of being , Such as closures .

What are the better ones in the community React Hooks utils The library? ？

react-use^[2] The community is more active React hooks utils library , its star The number has reached 29.6k. It's very powerful , With the hooks already 100+. If you need more complete functions , Consider choosing react-use.

If you don't need very complete functions , Just a few common features are required ,react-use It may be a little redundant , Consider our protagonist today ——ahooks^[3], At present, its star The number of 9.2k, The community is more active .

ahooks

brief introduction

The official introduction is as follows ：

ahooks, pronunciation [eɪ hʊks], It is a set of high-quality and reliable React Hooks library . At present React In the process of project development , A good set of React Hooks The library is essential , hope ahooks Can be your choice .

characteristic

It has the following characteristics ：

• Easy to learn and easy to use .
• Support SSR.

  • Will visit DOM/BOM The way to do this is to useEffect in （ The server will not execute ）, Avoid errors when the server executes .
  • You can see a lot in the source code isBrowser The judgment of the , It mainly distinguishes between browser environment and server environment .
• The input and output functions are specially processed , And avoid closure problems .

  • Input function , Always use the latest one . This is through useRef To implement .
  • Output function , The address will not change , This is through useMemoizedFn（ahooks Packaged ） Realized , In fact, it is also realized through useRef Realization . We'll talk about that later .
• Contains a large number of high-level... Refined from the business Hooks.
• Contains rich foundation Hooks.
• Use TypeScript structure , Provide complete type definition file . You can learn something TypeScript The technique of .

hooks species

ahooks be based on UI、SideEffect、LifeCycle、State、DOM And other categories provide common Hooks. As shown below ：

The picture comes from the Internet , Invasion and deletion

ahooks The overall architecture

Project start

Let's start with ahooks in folk One copy ^[4],clone Come down .

yarn run init
yarn start

If you can successfully start the service , You will see the same page as the official document .

The overall structure

From the root directory of the warehouse package.json The following information can be found in .

• Documentation is the use of dumi. Is a document tool for component development scenarios .
• The project is a monoRepo. Its project management is through lerna^[5] managed .
• The unit test passed jest Realization .

Its directory structure , You can see docs Store warehouse public documents in .packages Store two bags in ,hooks and use-url-state. The overall structure is similar to dumi Given in lerna The structure of the project is similar . Each component under each package can write corresponding documents , The difference is ,hooks There are more components in the __tests__ Folder , This is used to write unit tests .

Follow hooks Similar organizational forms

You can use the following picture , In summary ahooks The engineering structure of ：

hooks

I just mentioned ,ahooks Is adopted monoRepo The way , Our source code is in packages in , Let's see hooks. First look at packages/hooks/package.json. In addition, use useUrlState This hook, It needs to be installed independently @ahooksjs/use-url-state, Its source code is packages/use-url-state in . I understand that the official intention should be that this library depends on react-router, There may be some projects that do not require , Bringing it up will help reduce the size of the package .

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

go back to packages/hooks. Focus on dependencies and peerDependencies. You can see that it actually uses some other tool libraries , such as lodash（ I guess it's to avoid building wheels again , But I feel that this will make the bag bigger ）. 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"
},

In addition, explain peerDependencies.

peerDependencies The purpose is to prompt the host environment to install the plug-in that satisfies the requirements peerDependencies The specified dependent package , Then in the plug-in import perhaps require When it comes to dependent packages , It's always installed with reference to the host environment npm package , Finally solve the problem that the plug-in is inconsistent with the dependent package . The hosting environment here generally refers to our own project itself .

This is important for packaging npm Bags are very important . When you write the package a It depends on another package b, And this bag b It refers to this package a The business of the commonly used package , The suggestion is written in peerDependencies in , Avoid duplicate Downloads / Multiple versions coexist .

summary

As the first article in the series , It introduces React hooks utils The background of the library and ahooks Features and overall structure of , Next, we will explore various common hooks Method realization , Coming soon .

Reference resources

• ahooks Official release ： It's worth embracing React Hooks Tool library ^[6]

Reference material

[1]

details : https://github.com/GpingFeng/hooks

[2]

react-use: https://github.com/streamich/react-use

[3]

ahooks: https://ahooks.js.org/zh-CN/guide

[4]

One copy : https://github.com/GpingFeng/hooks

[5]

lerna: https://www.lernajs.cn/

[6]

ahooks Official release ： It's worth embracing React Hooks Tool library : https://developer.aliyun.com/article/768059