Have you used useeffect and uselayouteffect

Make a demand before , It is found that there is a secondary rendering . Record it here useEffect And useLayoutEffect The difference between

Let's start with a piece of code

What is the print order ？ You guys can guess for yourself .

useEffect

The official definition of

Within the body of the function component （ This refers to React Rendering phase ） change DOM、 Add subscription 、 Set the timer 、 Logging and performing other operations with side effects are not allowed , Because it can lead to unexplained bug And destroy UI The consistency of .

To put it more generally

useEffect In fact, it is to make functional components have a life cycle .

useEffect Execution time of

The official definition of

And  componentDidMount、componentDidUpdate  The difference is , Pass to  useEffect  The function will complete the layout and drawing in the browser after , Called in a delay event . This makes it suitable for many common side effect scenarios , For example, setting subscription and event handling , Because most operations should not block the browser from updating the screen .

Generally speaking

No matter in the interview , Or at work . If someone asks you useEffect How to simulate the life cycle . You will answer without thinking

• The second parameter passes an empty array , simulation componentDidMount

• The second parameter passes dependencies , simulation componentDidUpdate

• The second parameter passes an empty array , And through return To call a method in the form of , simulation componentWillUnmount

however useEffect The execution order problem , Did you think of ？ If the parent and child components exist at the same time useEffect Who left first ？

Look at a piece of code

result

Why are subcomponents useEffect Go ahead ？

analysis

We all deserve useEffect The execution of is in commit after ,React Of commit What does the stage do ？ Simply speaking , Will be DOM Render to page . So can we think of ,useEffect In fact, after the page has been rendered , Triggered again ？

According to this execution logic ：

• The parent component enters commit Stage , Found to have Son Components need to be rendered .

• To begin Son Life cycle of , Son Get into commit Stage , Execute the useEffect,Son End of rendering

• Parent component commit Stage , Render completed , perform useEffect

useLayoutEffect

The official definition of

Its function signature and  useEffect  identical , But it will be in all DOM Synchronous call after change effect. You can use it to read DOM Layout and sync trigger re rendering . Before the browser does the drawing ,useLayoutEffect  The internal update plan will be refreshed synchronously

Popular speaking

useLayoutEffect And componentDidMount It's synchronous . stay commit Before the stage , The execution order is better than useEffect

Execution order

useEffect And useLayoutEffect The difference between

useEffect Change value

• benefits Do not block the rendering update of the browser screen

• Disadvantage It will cause secondary rendering , Poor user experience

Can't make a motion diagram .... Try it on your own ...

It'll flash , The first thing the page shows is Initial value , Click on Initial value , First change it to I changed , Then change to I changed again ？ The user experience is very bad .

useLayoutEffect Change value

• benefits along with componentDidMount Synchronous execution , It will not cause secondary rendering

• Disadvantage Rendering updates that may block the browser screen

The first thing the page shows is Initial value , Click on Initial value , Change to I changed again

Execution diagram of the initial code

It may be a little understood . If you have a better understanding later, you will revise this article