Middle+

import React, { useState, useEffect, useLayoutEffect } from 'react'; Экспорт бойынша әдепкі () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("әр рендер 1")); console.log("әр рендер 2"); useEffect(() => console.log("әр рендер 3")); return ( <button onClick={() => setCount((prevProps) => ++prevProps)}> Арттыру </button> ); } // орнату -> әр рендер 2, әр рендер 1, әр рендер 3 // жаңарту -> әр рендер 2, әр рендер 1, әр рендер 3 // жою 4

sobes.tech AI

AI-дан жауап

React-те шақыру тәртібі және хуктар мен логтардың іске қосылуы келесідей:

Әр рендер кезінде алдымен компоненттің денесі орындалады, онда console.log("each render 2") шақырылады.
Содан кейін useLayoutEffect шақырылады, ол DOM-ға өзгерістер енгізілгеннен кейін, бірақ браузер өзгерістерді көрсетпес бұрын орындалады. Онда console.log("each render 1") шақырылады.
Браузер өзгерістерді көрсеткеннен кейін, useEffect шақырылады, онда console.log("each render 3") орындалады.

Осылайша, монтаждау және жаңарту кезінде логтардың тәртібі келесідей:

each render 2
each render 1
each render 3

Демонттау кезінде useEffect және useLayoutEffect тазалау функцияларын қайтаруы мүмкін, бірақ бұл мысалда олар жоқ, сондықтан демонттау кезінде логтар болмайды.

Түсіндірмелері бар мысал:

import React, { useState, useEffect, useLayoutEffect } from 'react';

export default () => {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    console.log("each render 1");
  });

  console.log("each render 2");

  useEffect(() => {
    console.log("each render 3");
  });

  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Increment
    </button>
  );
}

Маңызды: useLayoutEffect көрсетілген кезде орындалғанға дейін блоктайды, ал useEffect асинхронды түрде орындалады.

Алдыңғы Келесі