React Hooks introduced in React V16.8. When you’re still trying to decide whether to use a stateless Function or a stateful Class, when you’re confused about which lifecycle hook Function to use, While you’re still reeling from this reference in this component, embrace Hooks and everything will be fixed. Let’s take a look at what Hooks looked like in the first place:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable called "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()= > setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Copy the code


No setState to refresh the render asynchronously, just get your values and responses by deconstructing them, it all looks so elegant. Let’s look at how this Hooks thinking leads us to think about functional components.

Customize the Hook

With custom hooks, component logic can be extracted into reusable functions.

In business scenarios, it is not as simple as get and set, and there are many places that need to apply logic in combination with Hook, such as:

import React, { useState } from "react";

export const testDemo = (a)= > {  
  const [ visible, setVisible ] = useState();

  const openModal = (a)= > {
    setVisible(true);
  }
  const hideModal = (a)= > {
    setVisible(false);
  }
  return( <React.Fragment> <div onClick={openModal}>open Modal! </div> <Modal visible={visible} onCancel={hideModal} /> </React.Fragment> ); };Copy the code


You can see that in addition to the necessary variable visible, to control Modal you have to have open and close method calls. In fact, if you just write a component, it looks like a good amount of code, but every time you use Modal, you have to have the same logic that needs to be rewritten, which inevitably increases code redundancy.

So if you want to solve this kind of problem, you need to encapsulate the logic, we use custom Hook useModalVisible here. Without further ado, let’s look at the wrapped code:



import React, { useState } from "react";
import {useModalVisible} from '@/utils';
export const testDemo = (a)= > {  
    const { visible, hideModal, openModal } = useModalVisible();
    return( <React.Fragment> <div onClick={openModal}>open Modal! </div> <Modal visible={visible} onCancel={hideModal} /> </React.Fragment> ); };Copy the code



You can see

useModalVisible

This is our custom Hook that returns visible, hideModal, And openModal that we need, encapsulated once, and used by all Modal.

Let’s look at the internal implementation of a custom Hook:

This completes a custom Hook.

Saw an interesting library at present, according to the scenario using Hooks made a lot of wheels “react – hanger”


Functional component

We found that if reuse logic can build wheels by encapsulating Hooks functions, can it be used to write components?

The answer is absolutely necessary.

Let’s start with the code for a functional component in real business:

As you can see, our component receives props and returns the value of the DOM wrapped around the object. We can also return some data generated by the component packaged with the DOM as an object.

Calling a functional component:



Now that we have completed a functional component wrapper, let’s see what the final component wrapper looks like:




Retrun allows us to use Hooks to tell the parent class what data we generated from the logic, no need for callback to be passed back and forth as the parent class does.

At the end

I don’t know how you felt about reading the full article, or have hooks to think about in the comments section. Personally, Hooks bring not only code elegance, but a way of thinking about code. If there are errors or typesetting problems in the article please big guy light spray 😂, little brother this is the first time to write an article, I hope to become a code contributor from the requisition. Finally, a famous quote from the big guy:

“The process of external transformation refers to the building of a good reputation for potential or competence, which can significantly change our self-perception; “The process of inner transformation involves a shift in inner motivation and identity, and it doesn’t happen independently, but gradually in relationships with other people.” — Power Trap