Hooks useState useEffect

import React, { useState,useEffect } from 'react'
function Hook() {
         The first item of the array is equivalent to the data in the state
         The second item of the array is a method to change the setstate of the first item of the current array setName('Old Zhu') directly pass in the modified data
         Any initialized value can be passed in useState()
         let [name,setName] = useState('Xiao Zhu')
    let [age, setAge] = useState(()=>{
                 return 22 //Lazy evaluation. When modifying, this function will not be modified anymore
    })
    return (
    <div>
      <span>{name}</span>
      <button
        onClick={() => {
                     setName('Old Zhu')
          setAge(22)
        }}
      ></button>
    </div>
    )
}

useEffect adds the ability to perform side-effect operations to functional components.

Data acquisition, setting up subscriptions, and manually changing the DOM in React components are all side effects

import React, { useState, useEffect } from 'react'
function A() {
  let [name, setName] = useState(() => {
    return'Old Zhu'
  })
  useEffect(() => {
           console.log('Hook executed')
           setName('Old Zhu')
           //Avoid memory leaks
     return ()=>{
                   //This is equivalent to the page uninstallation stage
                 //Clear all the side effects here, the problems inside after destruction, such as the timer added above, the component is still executing after destruction
     }
     }, [name]) //Here [] can place a monitoring item, as long as there is a change, it will be executed once, and it will also be executed during the first initialization
     [] Passing an empty array will not repeat execution state dependent 
  return <div>{name}</div>
}

Intelligent Recommendation

hooks-useState

hooks-useState Case Similarly, the process of UserEDucer, the core looks at the Mount and Update of Useestate. mountState basicStateReducer This function is related to subsequent updates. It is only b...

React Advanced usage of personal use and hooks opinion (Typescript version) - 2.hooks of useState, useEffect, since the actual definition of the hooks

2.hooks of useState, the actual use of useEffect (Typescript) Released from React16.8 version of hooks, hooks use is more and more fire, which appeared in many stateless components (function) + hooks ...

Hooks-useEffect

useEffect Description Effect Hook allows you to perform side effects in a function component Side effects: data acquisition, setting / destruction timer and manual change in the react component belong...

React hook useState, useEffect

One, React hook Hook is a new feature of React 16.8. It allows you to use state and other React features without writing a class. So, don't worry about whether to use stateless components (Function) o...

React Hook ----------- Usestate, useeffect

Usestate use: definition That is: Const [state, change the state] = useestate ('initial value') use That is, change Click on Num plus one Useeffect Use: Parameter callback: The callback function is to...