React Hook what is react Hook and why

What React Hook is and why? The React Conf 2018 explains it in detail. React Today and Tomorrow and 90% Cleaner React With Hooks

Why react Hook?

According to react officials, the class component is garbage and causes a lot of problems. For example,

1. Logic reuse is difficult

2. The component is too large

3. Confusing Classes

In fact, I don’t understand why class makes people and computers confused. I thought it was my translation, but I found the official document in Chinese

The documentation explains it like this

In addition to making it harder to reuse and organize code, we found that class can be a big obstacle to learning React. You have to understand how this works in JavaScript, which is very different from how it works in most programming languages. You have to remember to bind those event handlers. Without unstable syntactic proposals, writing code can be tedious. People can understand props, state, and the data flow from the top down pretty well, but still struggle with class. The difference between function component and class Component in React, and when to use one or the other, divides even experienced React developers.

Also, React has been around for about five years, and we want to make sure it stays competitive for the next five years. As Svelte, Angular, Glimmer, and others have shown, precompilation of components has great future potential. Especially if it’s not limited to templates. Recently, we experimented with Prepack for Component Folding, and we’ve seen promising early results. However, we found that using Class Component encourages unintentional patterns, which can lead these optimizations back down a slower path. Class also has problems with current tools. For example, class doesn’t compress well, and it makes Hot Reload fragile and unreliable. We want to come up with an API that makes code more likely to stay on an optimized path.

To address these issues, hooks allow you to use more of React functionality without the need for a class. Conceptually, the React Component has always been closer to function. Hook embraced function without sacrificing the actual spirit of React. Hook provides access to imperative technology without requiring you to learn complex functional or Reactive programming techniques.

Well, whatever you say, hook is added anyway

4. Nested hell

Ha ha ha ha ha 😂😂😂😂 doctor

How does React Hook solve these problems?

Well, since the above raised the question, then we see the React official is how to solve these problems 😂

An example for the Confusing Classes Dan guru is a two-way binding of an input box

Filed is the onChange function that needs to be bind for this, and when filed increase, there will be more binding

Then he gave the solution of hook version, which was really much simpler

Then there is the problem of nested hell

One example is the use of context

The code is as follows: Data that uses context in a class component needs to be nested

Then he gave the hook version of the solution, so nice ~ ~ ~

The following example sets the value of document.title based on the input of name and surname

Hooks version

The article of this water stroke write I also tired 😂

The final example is to display the width of the browser window on the view, and the data changes when the browser is scaled

Code for the CALSS component

Hooks version

About Logic reuse

The final final gives a final version

The react to summarize

React-hooks are good news for React users…

But!! What if you don’t react? Such as presents 😂

Angular does this

Ts part

HTML part

What? React context not implemented to share data?

I’m too lazy… However, the code 😂 is super simple to define a service

The final result

The red area is the sun Tzu component, which shares data YELLOW and China with the outermost component

AppService code

Ts code for the APP component (outermost component)

HTM code for the APP component (outermost component)

Grand-child ts code

Grand-child’s HTML code

Finally, welcome to the Angular pit