Starting from looking at the source code of ahooks: source code preparation stage

ahooks

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

• Abstraction of common logic.
• Solve the disadvantages of React hooks, such as closures.

ahooks is a high-quality and reliable React Hooks library.

As introduced on the official website , its features are as follows:

• Easy to learn and use

• Support SSR

  • Put the method of accessing DOM/BOM in useEffect (the server will not execute it) to avoid error reporting when the server executes.
  • You can see a lot isBrowserof , mainly to distinguish between the browser environment and the server environment.

• Special processing is done for input and output functions, and closure problems are avoided.

  • The input function always uses the latest copy. This is achieved useRefthrough .
  • The output function and address will not change. This is useMemoizedFnrealized through (encapsulated by ahooks), and its realization is also useRefrealized . We will mention it later.

• Contains a large number of advanced Hooks extracted from the business

• Contains rich basic Hooks.

• Built with TypeScript, complete type definition files are provided. You can learn some TypeScript tricks.

There are many types of ahooks, and commonly used Hooks are provided based on categories such as UI, SideEffect, LifeCycle, State, and DOM.

Source code preparation

1. Clone the source code from the ahooks repository

After the clone is successful, open the package.json file to check, and find that the package management tool is pnpm. So you need to install pnpm globally first.

what is pnpm

pnpm is an alternative package manager for Node.js. It's a drop-in replacement for npm, but faster and more efficient.

Why is it more efficient? When you install a package, we save it in global storage on your machine, and we create a hard link from it instead of copying it. For each version of a module, only one copy is kept on disk. For example, when using npm or yarn, if you have 100 packages that use lodash, you will have 100 copies of lodash on disk.

pnpm allows you to save gigabytes of disk space!

Advantages of pnpm

pnpm has all the additional features of Yarn over npm:

• Security: Like yarn, pnpm has a special file containing checksums of all installed packages, used to verify the integrity of each installed package before executing code.
• Offline mode: pnpm saves all downloaded package tarballs in a local registry mirror. It never makes a request when the package is available locally. Use the --offline parameter to completely disable HTTP requests.
• Speed: pnpm is not only faster than npm, but also faster than yarn. It is faster than yarn for both cold and warm caches. yarn copies files from cache, while pnpm just links them from global storage.

For more information, visit the official website: pnpm

2. Check the node version number, if it is lower than 14.6, you need to upgrade node first

Don't ask me how I know, click on the picture:

If the node version does not meet the requirements, follow me to upgrade node~

Note: Only mac works! If the following command prompts that there is no permission, please add sudo in front of the command

1. clear node cache

npm cache clean -f

2. Install n module (n module is to manage nodejs version)

npm install -g n

3. Upgrade node.js to the most stable version

n stable

4. Check node version

node -v

5. View node installation path

 which node

3. Install pnpm globally

npm install pnpm --location=global

Note: Do not use -g for global installation, it will report an error after upgrading node

4. Start the ahooks project

npm run init
npm start

After the project is started successfully, you will see the same page as the official document.

The project files and their corresponding functions are as follows: