Co się dzieje, gdy wywoływana jest funkcja setState()?

Question

Jak działa funkcja setState()? Czy działa tylko render()?

Answer 1

setstate() będzie działać funkcje w tej kolejności:

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

Jeśli urządzenie odbiera rekwizytów będzie uruchomić componentWillRecieveProps() funkcja z powyższym Funkcje.

Answer 2

Jak działa funkcja setState()? Czy to tylko uruchomić render()

nr setstate nie tylko wywołuje funkcję render() ale po setState następujące funkcje cyklu życia będą uruchamiane w kolejności w zależności od tego, co shouldComponentUpdate zwrotów

jeśli shouldComponentUpdate Zwraca TRUE (co jest prawdą domyślnie).

1. shouldComponentUpdate 
2. componentWillUpdate 
3. render() 
4. componentDidUpdate 

jeśli shouldComponentUpdate zwraca false (jeśli masz niestandardową implementację)

1. shouldComponentUpdate 

jeszcze jedno wiedzieć o setstate jest to, że to tylko powoduje ponowne renderowanie dla bieżącego składnika oraz wszystkich jej dzieci (nie uwzględniając implementacji shouldComponentUpdate dla żadnego z jej potomków), to nie powoduje ponownego renderowania komponentu nadrzędnego, a zatem reconcilation nie występuje dla składników macierzystych, ale tylko dla siebie i jego dzieci.

DEMO tego, co się stanie, gdy zostanie wywołana setState.

class App extends React.Component { 
 
    state = { 
 
     count: 0 
 
    } 
 
    componentWillReceiveProps(nextProps) { 
 
     console.log('componentWillReceiveProps parent'); 
 
    } 
 
    shouldComponentUpdate() { 
 
     console.log('shouldComponentUpdate parent'); 
 
     return true; 
 
    } 
 
    componentWillUpdate() { 
 
     console.log('componentWillUpdate parent'); 
 
    } 
 
    render() { 
 
     console.log('render parent') 
 
     return (
 
     <div> 
 
      <Child count = {this.state.count}/> 
 
      <button onClick={() => { 
 
      console.log('callingsetState');this.setState((prevState) => ({count: prevState.count + 1}))}} >Increase</button> 
 
     </div> 
 
    ) 
 
    } 
 
    componentDidUpdate() { 
 
     console.log('componentDidUpdate parent') 
 
    } 
 
} 
 
class Child extends React.Component { 
 
    
 
    componentWillMount() { 
 
     console.log('componentWillMount child'); 
 
    } 
 
    componentDidMount() { 
 
     console.log('componentDidMount child'); 
 
    } 
 
    componentWillReceiveProps(nextProps) { 
 
     console.log('componentWillReceiveProps child'); 
 
    } 
 
    shouldComponentUpdate() { 
 
     console.log('shouldComponentUpdate child'); 
 
     return true; 
 
    } 
 
    componentWillUpdate() { 
 
     console.log('componentWillUpdate child'); 
 
    } 
 
    render() { 
 
     console.log('child') 
 
     return (
 
     <div> 
 
      <div>{this.props.count}</div> 
 
     </div> 
 
    ) 
 
    } 
 
    componentDidUpdate() { 
 
     console.log('componentDidUpdate child') 
 
    } 
 
} 
 

 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Aby dodać wyjaśnienie kwestii, które @poepje dodanej na swoje pytanie

Co setstate robi?

setstate() kolejkuje zmiany stanu komponentu i mówi React że ten komponent i jego dzieci muszą być ponownie renderowane z zaktualizowanego stanu. Jest to podstawowa metoda używana do aktualizowania interfejsu użytkownika w odpowiedzi na procedury obsługi zdarzeń i odpowiedzi serwera.

React ma bardzo dobrą dokumentację na temat tej funkcji here

Można również zobaczyć następującą odpowiedź na dziełach jak setstate:

setState doesn't update the state immediately