This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

A, the React of Hooks

1.React HooksWhat is the

React Hooks are a new hook API that allows functional components to manage component state, as well as embed life cycles in functional components

Class components

Declaration method:

class Hello extends React.Component {}
Copy the code

Disadvantages:

  • Reusing state between components is more complex
  • To pass thethisWay to program, there are complex binding work

Second,React HooksWhat problems have been solved:

  • Resolves the class componentthisBinding, difficult to reuse state logic, complex structure and other problems
  • Ability to customizeHooksCan reuse state logic without modifying component structure
  • Component parts can be broken down into smaller and leaner pieces
  • Side effect separation

React HooksuseState

1.React Hooks useStateThe import of

Import:

import { useState } from 'react';
Copy the code

2,React Hooks useStateThe use of

Basic use of useState:

const [state, setState] = useState(initialState);
/ / sample
const [number,setNumber] = useState(0)
Copy the code

Description:

  • Parameter: initialstate, returned on the first renderstateThat’s incominginitialState
  • Return result: an array containing two elements (the first element is returned)stateThe second element is a function that can modify the variable.) 
    const [number,setNumber] = useState(0)
render() {
    return (
        <div onClick={() = >{ setNumber(number + 1) } }>{ number }</div>)}Copy the code

Functional update of useState: When using useState, there may be continuous modification operations, so the previous state should be saved and used carefully. In the following example, the previous state should be passed into setNumber as a parameter before operation

const [count, setCount] = useState(0);
render() {
    return(< div > < div > count: {count} < / div > < div onClick = {() = > setCount (count = > count + 1)} > add 1 < div > < / div >)}Copy the code

Lazy initialization of useState:

  • initialStateOnly during component initial rendering, subsequent rendering is ignored
  • If the initialstateYou can pass in a function that does the logical processing and returnsstate, but only during initialization
// Lazy initialization
const [state, setState] = useState(initialState);
Copy the code

3. useStateFeatures:

  • On multiple transfersuseState, the order of each render call is unchanged, namely: 
    // The following are executed in order
const [name1,setName1] = useState("Tony");
const [name2,setName2] = useState("Bob");
Copy the code
  • useStateCannot be used in conditional judgments, loops, or nested functionsMust be used inside the outermost layer of the functionHooksSame thing)
  • HooksOnly in theReactFunction call, normalJSCannot be called in a function
  • useStateThe use ofthis.setState, butuseStateChange isOverlay modificationAnd thethis.setStateisCombined modification
  • Each render is independent, and the function component is called again after the status update, so the internalProps,StateThey’re all independent