React setstate mechanism

Time:2020-11-24

setStatecharacteristic

  • Immutable value
  • It could be an asynchronous update
  • It may be merged

stateTo define in the constructor

Immutable value

Functional programming ideas, pure functions, no side effects

When to revise and when to correctstateOperation, do not operate in advance

//Operation array
this.setState({
  list1: this.state.list1.concat(100),
  list2: [...this.state.list2, 100],
  list3: this.state.list3.slice(0, 3),
  list4: this.state.list4.filter((item) => item > 100),
  List5: list5copy, // other operations
});

Can’t directly on arraypoppushspliceEtc

//Operation object
this.setState({
    obj1: Object.assign({}, this.state.obj1, {a: 100}),
    obj2: {...this.state.obj2, {a: 100}}
})

It’s not rightthis.state.obj1operation

Why emphasize immutable values, because in the performance optimization sectionshouldComponentUpdateIs to compare two valuesoldStateandnewStateIs the value the same,setStateWill triggershouldComponentUpdatehereoldStateandnewStateIt’s the same value.

It could be an asynchronous update

Use in asynchronous functionssetStateIs a synchronous operation, otherwise it is asynchronous

//Asynchronous
this.state = {
  count: 0,
};

this.setState({
  count: this.state.count + 1,
});

console.log(this.state.count); // 0
//Synchronization
this.state = {
  count: 0,
};

setTimeout(() => {
  this.setState({
    count: this.state.count + 1,
  });
  console.log(this.state.count); // 1
}, 0);
//Synchronization
this.state = {
  count: 0,
};

document.body.addEventListener("click", () => {
  this.setState({
    count: this.state.count + 1,
  });
  console.log(this.state.count); // 1
});

It may be merged

setStateObjects that are passed in will be merged, and incoming functions will not be merged

//Will be merged
this.setState({
  count: this.state.count + 1,
});
this.setState({
  count: this.state.count + 1,
});
this.setState({
  count: this.state.count + 1,
});

count; // 1
//Will not be merged
this.setState((prevState, props) => {
  return {
    count: prevState.count + 1,
  };
});
this.setState((prevState, props) => {
  return {
    count: prevState.count + 1,
  };
});
this.setState((prevState, props) => {
  return {
    count: prevState.count + 1,
  };
});
count; // 3

Main process of setstate

this.setState(newState)newStateDepositpaddingQueue → inbatchUpdateIn the mechanism

? yes → keep components anddirtyComponentsin

Go through all of themdirtyComponents? callupdateComponent? updatepadding state or props

Function sets a variable before it starts executingisBatchingUpdates = trueThis isreactAfter the function is executed, theisBatchingUpdatesChange tofalse

The setting of this variable is not in the function. It can be considered that setting this variable totrueAfter the function is executed, change the variable tofalse

increate = () => {
  //Start: in batchupdate
  // isBatchingUpdates = true
  this.setState({
    count: 1,
  });
  //End
  // isBatchingUpdate = false
};
increate = () => {
  //Start: in batchupdate
  // isBatchingUpdates = true
  setTimeout(() => {
    //Isbatchingupdates is false
    this.setState({
      count: 1,
    });
  }, 0);
  //End
  // isBatchingUpdates = false
};

Is setstate asynchronous or synchronous?

  • setStateIt doesn’t matter whether it’s asynchronous or synchronous
  • See if you can hit itbatchUpdatemechanism
  • According to the judgment:isBatchingUpdates

Batchupdate mechanism

ReactEntry points that can be “managed”

  • Lifecycle (and the functions it calls)
  • ReactEvents registered in (and the functions it calls)

ReactThe entrance of “beyond control”

  • setTimeoutsetIntervalEtc. (and the function it calls)
  • CustomdomEvent (and the function it calls)

Transaction mechanism

Define the logic of a beginning and an end.

When executing this, first execute the logic at the beginning, then execute the current function, and finally execute the logic at the end of execution. This mechanism istransactionTransaction mechanism

This start and end logic is not necessarily defined in the function

increate = () => {
  //Start: in batchupdate
  // isBatchingUpdates = true
  //Any other operation
  //End: isbatchingupdates = false
};

Execution process of transaction mechanism

perform(anyMethod)initializeanyMethodclosewrapper invariants miantained

performthisapiyestransactionProvided

Recommended Today

Regular expression sharing for checking primes

This regular expression is shown as follows: Regular expressions for checking prime numbers or not To use this positive regular expression, you need to convert the natural number into multiple 1 strings. For example, 2 should be written as “11”, 3 should be written as “111”, 17 should be written as “11111111111”. This kind of […]