Hook is a new feature in React 16.8. It lets you use state and other React features without having to write a class

What problems Hook solves for us

  1. In the past, functional programming could not use functional components where component state changes were involved. Functional components are typically used for simple interactions and for information presentation. If you need to interact and change complex logic such as state, you need to use the class component. The emergence of hooks allows us to better embrace functional programming and enable functional components to use state functionality.
  2. ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM: ReactDOM
  3. Stateful logic reuse components
  4. Previously, we used redux, DVA and MOBx third-party state managers for complex state management. Now, we can use useReducer and useContext together to achieve complex state management without relying on third-party state managers
  5. Development efficiency and quality Issues Functional components are simpler than class components, provide a better development experience, are more efficient, and provide better application performance

New feature learning useState

UserState is a component state management hook that enables function components to use state. The basic usage syntax is as follows

const [ state,setState ] = useState( initState )
Copy the code

SetState: Method to update the state. This is just the name of a method. You can change initState at will

Simple counter example

import React, { useState } from 'react'

const App = () =>{
    const [count,setCount]=useState(0)
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={()=>setCount(count+1)}>+</button>
            <button onClick={()=>setCount(count-1)}>-</button>
        </div>
    )
}
export default App;
Copy the code

Simple text change example

import React, { useState } from 'react'

const App = () =>{
    const [context,setContext]=useState('This is text.')
    return (
        <div>
           <h1>{context}</h1>
           <button onClick={()=>{setContext('I changed the text.'</button> </div>)}export default App;
Copy the code

New feature useEffect

UseEffect: Side effects handle hooks

Side effects: Data retrieval, subscriptions, scheduled execution of tasks, and manual modification of the ReactDOM are all side effects. UseEffect is designed to deal with these side effects.

UseEffect is also the unity of componentDidMount, componentDidUpdate, componentWillUnmount these lifecycle methods.

The basic syntax is as follows:

useEffect( callback , array )
Copy the code

Callback: A callback function that handles side effect logic

UseEffect (() =>{// Side effect logic XXXXXXreturn()=>{// Clean up the side effects need to clean up the content // similar to componentWillUnmount, component rendering and components, before uninstalling the code}},[])Copy the code

Callback can return a function used to clean up array(optional) : an array that controls useEffect execution in three cases

  • An empty array only executes once (the first render), equivalent to componentDidMount
  • A non-empty array, useEffect is executed after the array changes
  • Without array, useEffect is executed every time you render
import React, { useState ,useEffect} from 'react'

const App = () =>{
    const [count,setUseEffect (() => {console.log(' you clicked on it${count}`)return() => {}},[])return (
        <div>
            <h1>{count}</h1>
            <button onClick={()=>setCount(count+1)}>+</button>
            <button onClick={()=>setCount(count-1)}>-</button>
        </div>
    )
}
export default App;
Copy the code

  1. The empty array case, no matter how many times I click, will only execute the first time, equivalent to componentDidMount:

  2. If you don’t do array, it’s going to be rendered every time it changes

UseEffect (() => {console.log(' You clicked${count}`)return() => {}})Copy the code

Not empty array 

UseEffect (() => {console.log(' you clicked${count}`)return () => {}
    },[count])
Copy the code