This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Translate: beta.reactjs.org/learn/state…

The state variable might look like a regular JavaScript variable that you can read and write. However, State behaves more like a snapshot. Setting it does not change the state variable you already have, but rather triggers rerendering.

In this series of articles you will learn:

  • How do I set state’s trigger for rerender
  • When and how is state updated
  • Why is the state not updated immediately after setting state
  • How event handlers access a “snapshot” of state

series

  • React State – Render state snapshots
  • React State (2) – State changes over time

conclusion

  • Setting state will render the new render.
  • React stores state outside the component as if it were on a shelf.
  • When you calluseStateReact will give you a snapshot of the state in the render.
  • Variables and event handlers do not “survive” on re-render. Each Render has its own event handler.
  • Each render (and its functions) will always “see” the state snapshot React gives the Render.
  • You can mentally replace state in event handlers, similar to how you think about JSX in Render.
  • Event handlers created in the past have the render state value at the time they were created.

Practice – Traffic light switching

After studying this series of three articles, let’s use an example to deepen our impression

This is a crosswalk light assembly that toggles when the button is pressed:

import { useState } from 'react';

export default function TrafficLight() {
  const [walk, setWalk] = useState(true);

  function handleClick() { setWalk(! walk); }return (
    <>
      <button onClick={handleClick}>
        Change to {walk ? 'Stop' : 'Walk'}
      </button>
      <h1 style={{
        color: walk ? 'darkgreen' : 'darkred'
      }}>
        {walk ? 'Walk' : 'Stop'}
      </h1>
    </>
  );
}
Copy the code

Add an alert to the click handler. When the green light turns green and says “Walk,” clicking the button should say “Stop is Next.” When the light is red and says “Stop,” clicking the button should say “Walk is next.”

Does it make a difference if you put alert before or after the setWalk call?

3

2

1

Solution:

import { useState } from 'react';

export default function TrafficLight() {
  const [walk, setWalk] = useState(true);

  function handleClick() { setWalk(! walk); alert(walk ?'Stop is next' : 'Walk is next');  / / here
  }

  return (
    <>
      <button onClick={handleClick}>
        Change to {walk ? 'Stop' : 'Walk'}
      </button>
      <h1 style={{
        color: walk ? 'darkgreen' : 'darkred'
      }}>
        {walk ? 'Walk' : 'Stop'}
      </h1>
    </>
  );
}
Copy the code

It makes no difference whether you put it before or after the setWalk call, the render walk value is fixed this time. Calling setWalk only changes it for the next render, but does not affect the event handler for the last render.

This line of code may at first seem counterintuitive:

alert(walk ? 'Stop is next' : 'Walk is next');
Copy the code

But if you read it as: “If the traffic light says’ Walk now ‘, the message should be ‘Stop is next’.” The walk variable in the event handler matches the Walk value of render and does not change.

You can verify that this is true by substituting variables. When walk is true, you get:

<button onClick={() = > {
  setWalk(false);
  alert('Stop is next');
}}>
  Change to Stop
</button>
<h1 style={{color: 'darkgreen'}} >
  Walk
</h1>
Copy the code

Therefore, clicking “Change to Stop” queues the render with walk set to false and alert “Stop is next”.