Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what are the problems solved by hooks in react". In daily operation, I believe that many people have doubts about the problems solved by hooks in react. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the questions of "what are the problems solved by hooks in react?" Next, please follow the editor to study!

The problems solved are: 1, extracting state logic from components, solving the problem that it is difficult to reuse state logic between components; 2, splitting the interrelated parts of components into smaller functions, solving the problem of complex components; 3, using more React features in non-class cases to solve the problem of differences between class components and function components.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What problem does hooks solve in react

1. It is difficult to reuse state logic between components

React does not provide a way to "attach" reusability behavior to components (for example, connecting components to store). Render props and higher-level components can be used to solve such problems. But such scenarios require reorganizing the component structure, which can be cumbersome and difficult for the code to understand. Components made up of providers,consumers, high-level components, render props, and other abstract layers will form a "nested hell". Although they can be filtered out in DevTools, this illustrates a deeper problem: React needs to provide a better native approach to shared state logic.

You can use Hook to extract state logic from components so that it can be tested and reused separately. Hook enables us to reuse state logic without modifying the component structure. This makes it easier to share Hook between components or within the community.

2. Complex components become difficult to understand

In components, each lifecycle often contains some irrelevant logic. For example, components often get data in componentDidMount and componentDidUpdate. However, there may be a lot of other logic in the same componentDidMount, such as setting event listening, which needs to be cleared in the componentWillUnmount later. Code that is interrelated and needs to be modified against each other is split, while completely unrelated code is grouped together in the same method. This makes it easy to generate bug and lead to logical inconsistencies.

In most cases, it is not possible to split components into smaller granularities because state logic is ubiquitous. This also brings some challenges to the testing. At the same time, this is one of the reasons why many people use React in conjunction with state management libraries. However, this often introduces a lot of abstractions that require you to switch back and forth between different files, making reuse more difficult.

To solve this problem, Hook splits the interrelated parts of the components into smaller functions (such as setting subscriptions or requesting data), rather than forcing them to be divided by life cycle. You can also use reducer to manage the internal state of components to make them more predictable.

3. Incomprehensible class

In addition to the difficulties encountered in code reuse and code management, class is a big barrier to learning React. We have to understand how this works in JavaScript, which is very different from other languages. Don't forget to bind the event handler. There is no stable syntax proposal, and the code is very redundant. You have a good understanding of props,state and top-down data flow, but there is nothing you can do about class. Even among experienced React developers, there are differences between functional components and class components, and even a distinction between the usage scenarios of the two components.

To solve these problems, Hook allows you to use more React features in non-class situations. Conceptually, React components have always been more like functions. Hook embraces functions without sacrificing the spiritual principles of React. Hook provides solutions to problems without learning complex functional or responsive programming techniques

At this point, the study of "what are the problems solved by hooks in react" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.