current position:Home>Simple introduction to react -- commonly used in hook useeffect

Simple introduction to react -- commonly used in hook useeffect

2022-01-27 01:06:45 Poker_ Xu

Preface :
stay react Created in class When the component , We can easily use specific methods , To determine what logic the component handles in what life cycle , for instance , stay componentDidMountcomponentDidUpdate We may need to send some requests , Or do some initialization , Or in componentWillUnmount It is possible for us to do some clear subscription operations ; But in functional components , You need to know that this component is now in that life cycle , But it's more troublesome , It's even a little hard to start , That's when we can use it hook Medium useEffect()

1、 Import :

This and useState equally , There is no need to import... From a third-party package , Directly from react Import in  Insert picture description here

2、 Use :

  • Scene one : Get when the component is mounted or updated dom Elements

Just look at the code  Insert picture description here
Page effects :
 Insert picture description here
It can also be found that this print is indeed from 74 and 77 Yes , And I do find that as long as I give useEffect() A function is passed in , In this function, you can get dom Elemental , This effect is indeed similar class In the component componentDidMountcomponentDidUpdate. Actually use class Components , Sometimes you don't just have to do one operation when the component is mounted , The same operation should be done when updating components , Come back to , and useEffect, Actually, I did it for you , You can even think of it as componentDidMount and componentDidUpdate Combined with .

  • Scene two : Subscribe to or create timers when components are mounted , Clear the subscription or timer when the component is unloaded id

To implement this scenario , We add another function component user, And put useEffect Move in to user In components , The code is as follows :

Home Components :
 Insert picture description here

User Components :
 Insert picture description here

Page effects :
 Please add a picture description
According to the test , We found out user The component starts by executing useEffect Of the first function in , In us user When the component is unloaded, it will execute useEffect Function return The resulting function , This is actually useEffect The purpose of , It is no longer like class Components , take componentDidMount()componentWillUnmount ()componentDidUpdate() The life cycle functions are listed separately , Still together , More convenient and concise .

  • Scene three : The above scenarios are all triggered only when the component changes effect, But sometimes I want to update components only when certain conditions are met

Look at the code first :

home Components

 Insert picture description here

user Components :
 Insert picture description here
Compared with scene 2 , What happened , I marked it with a red line or red box , The most important change is that I work for user In the component uaeEffect The function passed the second parameter , Now let's look at the effect :( Add the second parameter
 Please add a picture description
Observation found that , After I click the button , This user The component did not call again effect 了 , Then let's put user Component's useEffect Remove the second parameter of the function and see the effect :( Without the second parameter
 Please add a picture description
Observation found that , this useEffect The second parameter of the function is to control whether the component needs to be updated , Of course, if this method is used to meet your needs , You need to pay attention to Make sure that the array contains all the external scopes that will change in the effect Variables used in , Otherwise, your code will refer to the old variables in the previous rendering . As for details , You can check the official website How to deal with functions as well as Measures when the array changes frequently The content of .

copyright notice
author[Poker_ Xu],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270106425742.html

Random recommended