1. Introduction

Hook is a new feature in Act 16.8, Hook must be used in function components, but for students using vUE and vUE is a lot in common, let’s take a look at the Hook features:

• useusesStateMaintaining state
• useEffectSubstitute life cycle (componentDidMount,componentDidUpdate 和 componentWillUnmount)
• otherHook

2. Basic grammar

For our basic development, the use of usesState and useEffect basically completes the basic development. Let’s look at the basic usage:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() = > {
    console.log("Initialize");
    return () = > {
        console.log("The end"); }} []);return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()= > setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Copy the code

2.1. useState

UseState is used to maintain state, such as the variables defined by data in Vue. The way to change variables must use setCount functions, such as setCount(count + 1), used to drive views.

import React, { useState, useEffect } from 'react';

function Example() {
  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

When the button is clicked, setCount increments the count, and the count in the view is updated at the same time.

2.2. useEffect

UseEffect syntheses three life cycles componentDidMount, componentDidUpdate and componentWillUnmount, of which the basic usage is as follows:

useEffect(() = > {
  console.log("Initialize");
  return () = > {
      console.log("The end"); }} []);Copy the code

UseEffect supports passing in two arguments, the first of which is a callback function that needs to be executed, and the second is a non-mandatory argument of type array. The callback function supports returning a function that is executed when the component is unloaded. The second array argument is used for dependency listening, which triggers the useEffect callback when the variables in the array are updated.

3. Practical application

3.1. Request data

Initialize the request data (the second argument to useEffect requires an empty array, guaranteed to be executed only once) :

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() = > {
    // Make a data request here
    axios.get().then(res= >{}).catch(err= >{}).finally(() = >{}); } []);return (
    <></>
  );
}
Copy the code

Listen for request data. Sometimes we need to request data when a parameter, such as id, passed by the parent component changes. In Vue, we use Watch to monitor the change of ID for data request. In React Hook, the reference is as follows:

import React, { useState, useEffect } from 'react';

function Example(props) {
  const [count, setCount] = useState(0);

  // rely on props. Id to execute the callback function when the props. Id changes
  useEffect(() = > {
    // Make a data request here
    axios.get().then(res= >{}).catch(err= >{}).finally(() = >{});
   }, [props.id]);
   
  return (
    <></>
  );
}
Copy the code

3.2. Enable and disable global resources

In vue, start global resources in the mounted lifecycle, such as dom event binding and timer enabling. BeforeDestroy, disable resources that are enabled. React hook

import React, { useState, useEffect } from 'react';

function Example(props) {
  const [count, setCount] = useState(0);

  useEffect(() = > {
    // Start the timer
    let timer = setInterval(() = > {
    	console.log("Performing");
    }, 5000);
    // Clear the timer in the function returned
    return () = > {
        clearImmediate(timer)
    }
}, []);
   
  return (
    <></>
  );
}
Copy the code

In the example above, we use useEffect to turn on the timer in the callback function (event binding, etc.), and then clear the timer in the return function. The return function is executed when the component is unloaded.