What problems do hooks in react solve?

Problems solved: 1. Extract state logic from components, solving the problem of difficulty in reusing state logic between components; 2. Split the interrelated parts of the components into smaller functions , solves the problem of complex components; 3. Use more React features in non-class situations to solve the problem of differences between class components and function components.

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

What problems are solved by hooks in react

1. It is difficult to reuse state logic between components

React does not provide reusable Ways to "attach" behaviors to components (for example, connecting the component to a store) can solve this problem using render props and higher-order components. But such solutions require reorganizing the component structure, which can be cumbersome and make the code difficult to understand. Components composed of providers, consumers, higher-order components, render props, and other abstraction layers can create a "nested hell". Although it is possible to filter them out in DevTools, this illustrates a deeper problem: React needs to provide a better native way for shared state logic.

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

2. Complex components become difficult to understand

In components, each life cycle often contains some irrelevant logic. For example, components often get data in componentDidMount and componentDidUpdate. However, the same componentDidMount may also contain a lot of other logic, such as setting event listeners, which need to be cleared later in componentWillUnmount. Code that is related and needs to be modified is split up, while completely unrelated code is combined in the same method. This can easily lead to bugs and logical inconsistencies.

In most cases, it is not possible to split components into smaller granularities because state logic is everywhere. This also brings certain challenges to testing. At the same time, this is one of the reasons why many people use React with a state management library. However, this often introduces a lot of abstract concepts and requires you to switch back and forth between different files, making reuse more difficult.

To solve this problem, Hook splits the interrelated parts of the component into smaller functions (such as setting up subscriptions or requesting data), rather than forcing them to be divided according to the life cycle. You can also use reducers to manage a component's internal state to make it more predictable.

3. Incomprehensible classes

In addition to the difficulties encountered in code reuse and code management, classes are a major 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 event handlers. There is no stable syntax proposal and the code is very redundant. Everyone can understand props, state and top-down data flow very well, but they are at a loss for classes. Even among experienced React developers, there are disagreements about the differences between function components and class components, and even the usage scenarios of the two components.

To solve these problems, Hook allows you to use more React features without class. Conceptually, React components have always been more like functions. Hooks embrace functions without sacrificing the spiritual principles of React. Hook provides a solution to the problem without learning complex functional or reactive programming techniques

Recommended learning: "react video tutorial"

The above is the detailed content of What problems do hooks in react solve?. For more information, please follow other related articles on the PHP Chinese website!