ReactJS — metody cyklu życia komponentów

Komponenty React mają cykl życia zdarzeń, przez które przechodzą od momentu ich utworzenia do zniszczenia. Te zdarzenia cyklu życia umożliwiają programistom włączenie się w cykl życia komponentu w różnych punktach i wykonanie określonych działań.

Oto główne metody cyklu życia komponentu React wraz z krótkim wyjaśnieniem każdej z nich i przykładem, w jaki sposób można ich użyć:

constructor(): Ta metoda jest wywoływana przed zamontowaniem komponentu (wstawieniem do DOM). Służy do inicjowania obsługi zdarzeń stanu i wiązania.

Przykład:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Przykład:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

Przykład:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

Przykład:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

Przykład:

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

Oto podsumowanie głównych metod cyklu życia komponentów Reacta:

• constructor(): Inicjuje stan i wiąże procedury obsługi zdarzeń. Wywoływana przed zamontowaniem składnika.
• componentDidMount(): Wyzwala akcję lub wywołanie interfejsu API po wyrenderowaniu komponentu. Wywoływana po zamontowaniu komponentu.
• shouldComponentUpdate(): Zwraca wartość logiczną wskazującą, czy składnik powinien zostać zaktualizowany, czy nie. Wywoływana przed ponownym renderowaniem składnika.
• componentDidUpdate(): Wyzwala akcję lub wywołanie interfejsu API po zaktualizowaniu komponentu. Wywoływana po zaktualizowaniu składnika.
• componentWillUnmount(): Czyści zasoby lub detektory zdarzeń. Wywoływana tuż przed zniszczeniem składnika.
• render(): Renderuje JSX dla komponentu. Wywoływana, gdy komponent wymaga ponownego renderowania.