React Render Tutorial - 3 - useState

00:12:40
https://www.youtube.com/watch?v=OQYsHvEq7nE

الملخص

TLDRVideoclipul explică utilizarea hook-ului useState în React, arătând cum să create o componentă funcțională simplă care să gestioneze o numărătoare. Demonstrează cum stările afectează procesul de randare, explicând comportamentul re-randărilor și modul strict. Utilizatorii pot învăța cum să controleze fluxul de rendering și de ce anumite re-randări nu au loc atunci când se setează o stare la aceeași valoare. Autorul subliniază importanța înțelegerii acestor comportamente pentru dezvoltarea eficientă a aplicațiilor React.

الوجبات الجاهزة

  • 🚀 Începeți un proiect React cu 'npx create-react-app'.
  • 🛠️ Creați un folder 'components' pentru organizarea codului.
  • ⚛️ Folosiți 'useState' pentru gestionarea stării într-o componentă.
  • 🔄 O componentă se re-randează atunci când se utilizează setter-ul din useState.
  • 💡 Modulo strict poate provoca re-randări multiple în modul de dezvoltare.
  • ❌ Re-randarea nu are loc dacă se setează o stare la aceeași valoare.
  • 📊 React utilizează object.is pentru a compara stările.
  • 🔍 Corectarea și testarea comportamentului de re-randare sunt esențiale pentru dezvoltare.

الجدول الزمني

  • 00:00:00 - 00:05:00

    În acest video, se prezintă utilizarea hook-ului useState în React, începând cu crearea unui proiect nou folosind Create React App. Se explică procesul de configurare a structurii proiectului, inclusiv crearea unui folder pentru componente și a unui fișier pentru useState. Un exemplu de componentă este demonstrat, care include un buton pentru a incrementa o valoare a contorului. Se menționează comportamentul de redare al componentei, în special impactul modului strict de dezvoltare asupra logării re-rendering-ului.

  • 00:05:00 - 00:12:40

    Se discută despre comportamentul de re-rendering în contextul fazelor de redare și angajare. La fiecare clic pe buton, setterul de stare din hook-ul useState marchează componenta pentru o actualizare. Se ilustrează că actualizarea stării cu aceeași valoare nu determină o re-redare, iar React compară valorile stării pentru a decide dacă este necesară o redare. Se finaliză cu o recapitulare a comportamentului useState și a comparației dintre starea anterioară și cea curentă.

الخريطة الذهنية

فيديو أسئلة وأجوبة

  • Ce este hook-ul useState în React?

    useState este un hook care permite gestionarea stării într-o componentă funcțională React.

  • Cum se creează un proiect React?

    Un proiect React se poate crea folosind comanda npx create-react-app urmată de numele proiectului.

  • De ce componenta se re-randează de două ori în modul strict?

    Componenta se re-randează de două ori în modul strict pentru a ajuta la identificarea problemelor potențiale în aplicație.

  • Ce se întâmplă dacă se setează o stare la aceeași valoare?

    Dacă se setează o stare la aceeași valoare, React poate re-randa componenta o singură dată și apoi renunță la re-randări ulterioare.

  • Cum compară React vechea și noua stare?

    React compară starea anterioară și nouă folosind algoritmul object.is.

عرض المزيد من ملخصات الفيديو

احصل على وصول فوري إلى ملخصات فيديو YouTube المجانية المدعومة بالذكاء الاصطناعي!
الترجمات
en
التمرير التلقائي:
  • 00:00:01
    all right it's finally time
  • 00:00:03
    to get started with some code and our
  • 00:00:06
    first video
  • 00:00:07
    is about use date let's understand with
  • 00:00:10
    an example
  • 00:00:11
    the rendering behavior in react when we
  • 00:00:13
    are dealing with
  • 00:00:14
    the use state hook the first thing i
  • 00:00:17
    have to mention
  • 00:00:18
    is that i have created a new react
  • 00:00:21
    project using
  • 00:00:22
    create react app so go ahead and run the
  • 00:00:25
    command
  • 00:00:26
    npx create react app followed by your
  • 00:00:29
    project name
  • 00:00:30
    i have named the project as react render
  • 00:00:33
    demo
  • 00:00:35
    once your project is created in the
  • 00:00:37
    source folder
  • 00:00:38
    create a new folder called components
  • 00:00:43
    this folder
  • 00:00:44
    will contain all the code we are going
  • 00:00:46
    to write during this series
  • 00:00:49
    since this video's focus is on the use
  • 00:00:52
    state hook
  • 00:00:53
    within the components folder i'm going
  • 00:00:55
    to create another folder
  • 00:00:57
    called ustade
  • 00:01:00
    u and s in uppercase
  • 00:01:04
    within this folder i'm going to create a
  • 00:01:06
    new file
  • 00:01:07
    called use state.js
  • 00:01:11
    again u and s uppercase
  • 00:01:15
    within this file i'm going to use the
  • 00:01:17
    snippet rafc
  • 00:01:19
    to create a function component
  • 00:01:22
    all right that was a bit of work but we
  • 00:01:24
    finally have a component to understand
  • 00:01:26
    the rendering behavior with you state
  • 00:01:30
    for this example we are going to create
  • 00:01:32
    a simple
  • 00:01:33
    counter so import you state
  • 00:01:36
    at the top
  • 00:01:40
    and within the component create a count
  • 00:01:43
    state variable
  • 00:01:44
    and the setter function
  • 00:01:52
    so count set count and the initial value
  • 00:01:55
    is
  • 00:01:56
    zero for the jsx i'm going to add
  • 00:01:59
    a button that increments the count value
  • 00:02:04
    button the inner text is going to be the
  • 00:02:06
    count value
  • 00:02:12
    and on click we increment
  • 00:02:15
    the count value by calling set count
  • 00:02:18
    where we take the previous count and
  • 00:02:20
    increment it by
  • 00:02:22
    one and that is
  • 00:02:25
    pretty much our component and what we
  • 00:02:28
    are really interested in
  • 00:02:29
    is the rendering of this component so
  • 00:02:32
    i'm going to add a log statement
  • 00:02:36
    use state render to identify
  • 00:02:40
    when this component is rendering or
  • 00:02:43
    re-rendering
  • 00:02:45
    let me quickly format it and quickly
  • 00:02:48
    in the comments if you can leave an
  • 00:02:49
    opinion as to whether
  • 00:02:51
    this is the font size or this
  • 00:02:55
    is the font size you would prefer i
  • 00:02:57
    changed my monitor and i can't remember
  • 00:02:59
    the settings anymore
  • 00:03:01
    so just let me know in the comment
  • 00:03:02
    section and i'll stick to it
  • 00:03:05
    once we have this use state component
  • 00:03:07
    ready let's include it in
  • 00:03:09
    app.js and test it out so open app.js
  • 00:03:15
    include use date make sure to import it
  • 00:03:18
    at the top
  • 00:03:19
    and then let's head to the browser
  • 00:03:22
    on page load if we take a look at the
  • 00:03:25
    console
  • 00:03:28
    we can see two lock statements
  • 00:03:31
    if we check our component though we just
  • 00:03:34
    have
  • 00:03:35
    the one log statement but the statement
  • 00:03:38
    was logged
  • 00:03:39
    twice now this can be really confusing
  • 00:03:42
    at first
  • 00:03:43
    but this is because of the strict mode
  • 00:03:46
    encouraged by create react app if you
  • 00:03:49
    take a look at
  • 00:03:50
    index.js you can see that our app
  • 00:03:53
    component
  • 00:03:54
    is wrapped with react dot strict mode
  • 00:03:58
    what this wrapper does is intentionally
  • 00:04:01
    double invoke the function component
  • 00:04:03
    body
  • 00:04:04
    only in development mode if you deploy
  • 00:04:07
    to production however
  • 00:04:09
    you would see the lock statement only
  • 00:04:11
    once as intended
  • 00:04:13
    now if you want to understand why the
  • 00:04:15
    strict mode double invokes
  • 00:04:17
    or just want to learn more about strict
  • 00:04:19
    mode in general
  • 00:04:20
    i would advise you to go through the
  • 00:04:22
    react docs
  • 00:04:24
    for now the fix is to simply comment out
  • 00:04:27
    this wrapper component
  • 00:04:34
    if we now take a look at the browser we
  • 00:04:36
    see the log statement
  • 00:04:37
    only once which is what we would expect
  • 00:04:40
    from the initial render
  • 00:04:43
    now let's focus on the role of use state
  • 00:04:47
    after the initial render one of the ways
  • 00:04:49
    to flag a component for re-render
  • 00:04:52
    is by calling the setter function from
  • 00:04:54
    you state
  • 00:04:56
    in our component we are calling set
  • 00:04:59
    count
  • 00:05:00
    on click of the button if you go back to
  • 00:05:03
    the browser
  • 00:05:04
    clear the console and click on the
  • 00:05:07
    button
  • 00:05:09
    you can see that u-state render is
  • 00:05:11
    logged in the console
  • 00:05:13
    with every subsequent click the setcount
  • 00:05:17
    function
  • 00:05:17
    will flag or queue a re-render of our
  • 00:05:20
    component
  • 00:05:21
    and the message is logged in the console
  • 00:05:24
    every time
  • 00:05:26
    this is probably one of the more common
  • 00:05:28
    things that we learn
  • 00:05:29
    when using the use date hook
  • 00:05:32
    let's understand this re-rendering
  • 00:05:34
    behavior with respect to
  • 00:05:35
    the render and commit phases
  • 00:05:39
    we begin with the component tree we have
  • 00:05:42
    the app component and the use state
  • 00:05:44
    component
  • 00:05:46
    when we click on the button in the
  • 00:05:48
    ustate component
  • 00:05:49
    the state hooks setter function is
  • 00:05:51
    called which flags
  • 00:05:53
    the use state component as needing an
  • 00:05:55
    update
  • 00:05:57
    during the render phase react will first
  • 00:05:59
    go through the component tree
  • 00:06:00
    and identify the flag components
  • 00:06:04
    it says that ustate is the only
  • 00:06:06
    component that needs an update
  • 00:06:09
    react then uses the create element
  • 00:06:11
    method
  • 00:06:12
    to convert the component's jsx into a
  • 00:06:15
    react element
  • 00:06:17
    it will then diff the element produced
  • 00:06:19
    from the previous vendor
  • 00:06:21
    to the new render it will identify the
  • 00:06:23
    changes
  • 00:06:24
    and hand them over to the commit phase
  • 00:06:27
    where the changes are applied to the dom
  • 00:06:30
    this is what happens when you use the
  • 00:06:33
    state hook
  • 00:06:33
    in a react component now what is a
  • 00:06:37
    special case
  • 00:06:38
    with you state and re-rendering is that
  • 00:06:41
    if you update a state hook to the same
  • 00:06:43
    value as
  • 00:06:44
    the current state react may render that
  • 00:06:47
    component
  • 00:06:48
    one more time and then bail out from
  • 00:06:50
    subsequent renders
  • 00:06:53
    let's try to understand what i mean by
  • 00:06:54
    that with an example
  • 00:06:56
    in the components jsx i'm going to add
  • 00:06:59
    two more buttons
  • 00:07:02
    first button will simply set the count
  • 00:07:04
    value to zero
  • 00:07:06
    so count to zero
  • 00:07:10
    on click set
  • 00:07:13
    count zero
  • 00:07:16
    and the other button is going to set the
  • 00:07:18
    count value to five
  • 00:07:20
    so set count five
  • 00:07:23
    count to five
  • 00:07:26
    let's now head to the browser and see
  • 00:07:28
    what happens
  • 00:07:30
    on page load we have the one log message
  • 00:07:33
    from the initial vendor
  • 00:07:37
    if i click on the first button the
  • 00:07:39
    component re-renders
  • 00:07:41
    and we already know about this however
  • 00:07:44
    if i reload
  • 00:07:48
    clear the console and click on the
  • 00:07:50
    second button
  • 00:07:51
    which is count to zero
  • 00:07:55
    the component does not re-render and i
  • 00:07:58
    can click on it
  • 00:07:59
    as many times as i want to
  • 00:08:03
    so after the initial render if you call
  • 00:08:06
    a setter function
  • 00:08:07
    but set the state to the same value the
  • 00:08:10
    component
  • 00:08:10
    will not re-render next let's talk about
  • 00:08:14
    the count to five button
  • 00:08:17
    i'm going to reload the page and this
  • 00:08:19
    time
  • 00:08:21
    i'm going to click on the first button
  • 00:08:24
    five
  • 00:08:24
    times which logs the render message five
  • 00:08:27
    times
  • 00:08:28
    so one two three four five
  • 00:08:32
    you can see the message has been logged
  • 00:08:34
    five times
  • 00:08:37
    now i'm going to clear the console and
  • 00:08:40
    click
  • 00:08:40
    on the count to 5 button
  • 00:08:44
    you can see that the component renders
  • 00:08:46
    one more time
  • 00:08:48
    however if i click on the same button
  • 00:08:51
    again
  • 00:08:53
    as many times as i want to
  • 00:08:56
    the component does not re-render
  • 00:08:59
    let me clear the console click it again
  • 00:09:03
    the component does not re-render
  • 00:09:06
    if i increment it by one though
  • 00:09:11
    and then click count to five again
  • 00:09:14
    it will re-render as the state value
  • 00:09:16
    changes again
  • 00:09:18
    so after a component has been
  • 00:09:20
    re-rendered if you set the state
  • 00:09:22
    variable to the same value
  • 00:09:24
    the component will re-render but only
  • 00:09:27
    one more time let's quickly revisit
  • 00:09:31
    our interface and understand what
  • 00:09:33
    happens
  • 00:09:35
    we begin with the component tree we have
  • 00:09:38
    the app component
  • 00:09:39
    and the use state component when we
  • 00:09:42
    click
  • 00:09:43
    on the button in the ustade component
  • 00:09:45
    the state hooks setter function is
  • 00:09:47
    called
  • 00:09:47
    which flags the u state component as
  • 00:09:49
    needing an update
  • 00:09:51
    react will go through the component tree
  • 00:09:54
    and identify
  • 00:09:55
    the flagged components it sees that the
  • 00:09:58
    u-state component
  • 00:09:59
    is flagged however there is a catch
  • 00:10:04
    react requires that you state updates
  • 00:10:08
    must pass in or return a new reference
  • 00:10:12
    as the state value if the state is a
  • 00:10:15
    primitive type
  • 00:10:16
    it has to be a new string or number
  • 00:10:19
    or boolean if it is not the case
  • 00:10:23
    react will simply bail out from the
  • 00:10:25
    interface for that component
  • 00:10:27
    the bailing out part though has two
  • 00:10:29
    cases
  • 00:10:31
    if only the initial render is completed
  • 00:10:34
    and the value passed into the setter
  • 00:10:35
    function
  • 00:10:36
    is the same as before the render phase
  • 00:10:38
    bails out
  • 00:10:39
    from proceeding further however
  • 00:10:43
    if the component has been re-rendered
  • 00:10:45
    already then the component will proceed
  • 00:10:47
    with the render phase
  • 00:10:49
    one more time and dan abramov mentions
  • 00:10:52
    this as a safety net that is required
  • 00:10:55
    as react won't actually know if it's
  • 00:10:58
    safe to bail out in all cases
  • 00:11:00
    until it renders again so the render
  • 00:11:04
    phase
  • 00:11:04
    proceeds and generates the react element
  • 00:11:07
    from the jsx
  • 00:11:09
    the reconciliation takes place react
  • 00:11:12
    sees that there is
  • 00:11:13
    no change from the previous render and
  • 00:11:16
    simply exits
  • 00:11:17
    the render phase so it's important to
  • 00:11:20
    note here
  • 00:11:21
    that react goes to the render phase only
  • 00:11:24
    to discard the result
  • 00:11:26
    so that is the rendering behavior with
  • 00:11:29
    respect to the use state hook
  • 00:11:31
    let me summarize it so that it stays in
  • 00:11:33
    your head for a longer duration of time
  • 00:11:38
    the setter function from a u state hook
  • 00:11:40
    will cause the component to re-render
  • 00:11:44
    however the exception is when you update
  • 00:11:47
    a state hook
  • 00:11:48
    to the same value as the current state
  • 00:11:51
    if you're updating to the same value
  • 00:11:53
    after the initial render
  • 00:11:55
    the component will not re-render
  • 00:11:58
    if you're updating to the same value
  • 00:12:00
    after re-renders
  • 00:12:01
    react will render that specific
  • 00:12:03
    component one more time
  • 00:12:05
    and then bails out from any subsequent
  • 00:12:08
    renders
  • 00:12:10
    by the way if you're wondering how the
  • 00:12:12
    comparison is made
  • 00:12:14
    between the previous and the current
  • 00:12:16
    state
  • 00:12:17
    react uses the object dot ease
  • 00:12:20
    comparison algorithm
  • 00:12:21
    which you can google for more
  • 00:12:23
    information
  • 00:12:25
    i hope this video gives you an insight
  • 00:12:27
    into the type of content
  • 00:12:29
    you can expect in this series in the
  • 00:12:32
    next video let's take a look at the
  • 00:12:34
    reducer hook
  • 00:12:34
    which is similar in its behavior i'll
  • 00:12:37
    see you guys
  • 00:12:38
    in the next one
الوسوم
  • React
  • useState
  • hook
  • componentă
  • numărătoare
  • randare
  • re-randare
  • mod strict
  • stare
  • performanță