13
Jak działa funkcja setState()? Czy działa tylko render()?Co się dzieje, gdy wywoływana jest funkcja setState()?
A
Odpowiedz
7
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.
20
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:
Nic tu przydatny? https://facebook.github.io/react/docs/react-component.html#setstate – mplungjan
Wykonuje wiele funkcji z "react-dom", które faktycznie tworzą aktualizacje diffing i dom (jeśli to konieczne). – marzelin
Widzę tylko odpowiedzi na temat stany cyklu życia, ale brak odpowiedzi na pytanie, do czego służy funkcja setState(). Czy to właśnie miałeś na myśli lub chciałeś wiedzieć o cyklu życia? – poepje