React Hooks Detailed Explanation

What are hooks?

• A method of message processing used to monitor a specified program
• If you need to handle side effects in a function component, you can use hooks to "hook" external code in.
• Common hooks: useState, useEffect, useContext, useReducer
• Hooks are always named with the prefix use: useXXX

Class Component

Functional Components

A special class of functions that inject special functionality into your functional components

Why Hooks were created

• Some class components are lengthy and complex, making them difficult to reuse
• Final solution: stateless components and HOC (higher-order components), but there are still many problems

Stateless components cannot access asynchronous APIs and cannot be updated

HOC: Component nesting achieves reuse and increases component complexity

• The purpose of Hooks is to add state to functional components
• The life cycle function will handle multiple tasks at the same time: initiate ajax, track data status, bind event listeners
• Functional components are much lighter, using Hooks to hook into component states

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!