Summary of use of setState in React

Recently I have reviewed some basics about react, and record the details of the use of setState.
Asynchronous update of setState
Custom events are updated asynchronously

<div>
  <h2>{}</h2>
  <button onClick={e => ()}>Change the text</button>
  </div>

changeText() {
  ({
    message: "Hello React"
  })
  ();  // Hello World, the latest value cannot be obtained synchronously. Hello React}

Why is setState designed asynchronous?
setState is designed asynchronously, which can significantly improve performance;

If setState is updated every time you call it, it means that the render function will be called frequently and the interface will be re-rendered, which is very inefficient; the best way is to obtain multiple updates and then batch updates;
If state is updated synchronously but the render function has not been executed yet, then state and props cannot be kept synchronized; state and props cannot maintain consistency, which will cause many problems in development.

Get the value of setState asynchronously updated in time:
(partialState, callback) Gets through callback, callback method,

changeText() {
  ({
    message: "Hello React"
  }, () => {
    (); // Hello React
  });
}

2. Lifecycle function componentDidUpdate obtain

componentDidUpdate(prevProps, provState) {
  (); // Hello React
}

Synchronous update of setState
SetTimeout is synchronous update

changeText() {
  setTimeout(() => {
    ({
      message: "Hello React"
    });
    (); // Hello React
  }, 0);
}

Synchronous updates in native DOM events

const btnEl = ("btn");
  ('click', () => {
    ({
      message: "Hello React"
    });
  ();  // Hello React
})

Data merge of setState

This is done using (target, …sources). Each time setState does not directly replace all data in state, but covers the difference item, which is the key item in setState

SetState method merge

Multiple setState executions will be performed continuously, and only one will be executed in the end. In the example, the counter is only increased by 1.

increment() {
  ({
    counter:  + 1
  });
  ({
    counter:  + 1
  });
  ({
    counter:  + 1
  });
}

setState(callback) cancels the merge, in the example, the counter is only added 3 in the end

increment() {
  ((state, props) => {
    return {
      counter:  + 1
    }
  })

  ((state, props) => {
    return {
      counter:  + 1
    }
  })

  ((state, props) => {
    return {
      counter:  + 1
    }
  })
  }

Summarize

setState is asynchronous in component lifecycle or React synthesis events; setState is synchronous in timer or native dom events;
setState data merge, which is actually (target, …sources)
Multiple merges of setState can be cancelled by settingState (callback)

This is the end of this article about setState in React. For more related React setState content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!