React
Reakcja Cykl życia komponentów

Wprowadzenie

Tworzenie komponentów

Po utworzeniu komponentu React wywoływanych jest szereg funkcji:

• Jeśli używasz React.createClass (ES5), wywoływanych jest 5 funkcji zdefiniowanych przez użytkownika
• Jeśli używasz class Component extends React.Component (ES6), wywoływane są 3 funkcje zdefiniowane przez użytkownika

getDefaultProps() (tylko ES5)

Jest to pierwsza metoda o nazwie.

Wartości rekwizytów zwrócone przez tę funkcję będą używane jako wartości domyślne, jeśli nie zostaną zdefiniowane podczas tworzenia komponentu.

W poniższym przykładzie parametr this.props.name zostanie domyślnie this.props.name na Bob jeśli nie zostanie określony inaczej:

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState() (tylko ES5)

Jest to druga metoda o nazwie.

getInitialState() wartość getInitialState() określa stan początkowy składnika React. Środowisko React wywoła tę funkcję i przypisze wartość this.state do this.state .

W poniższym przykładzie this.state.count zostanie zainicjalizowany wartością this.props.initialCount :

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount() (ES5 i ES6)

Jest to trzecia metoda o nazwie.

Tej funkcji można użyć do wprowadzenia ostatecznych zmian w komponencie przed jego dodaniem do DOM.

componentWillMount() {
  ...
}

render() (ES5 i ES6)

Jest to czwarta metoda o nazwie.

Funkcja render() powinna być czystą funkcją stanu składnika i rekwizytów. Zwraca pojedynczy element, który reprezentuje komponent podczas procesu renderowania i powinien być albo reprezentacją natywnego komponentu DOM (np. <p /> ), albo komponentem złożonym. Jeśli nic nie powinno być renderowane, może zwrócić null lub undefined .

Ta funkcja zostanie przywołana po każdej zmianie rekwizytów lub stanu komponentu.

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

componentDidMount() (ES5 i ES6)

Jest to piąta metoda o nazwie.

Komponent został zamontowany i masz teraz dostęp do węzłów DOM komponentu, np. Poprzez refs .

Metodę tę należy stosować do:

• Przygotowanie timerów
• Pobieranie danych
• Dodawanie detektorów zdarzeń
• Manipulowanie elementami DOM

componentDidMount() {
  ...
}

Składnia ES6

Jeśli komponent jest zdefiniowany przy użyciu składni klasy ES6, nie można użyć funkcji getDefaultProps() i getInitialState() .

Zamiast tego deklarujemy nasze defaultProps jako właściwość statyczną w klasie oraz deklarujemy kształt stanu i stan początkowy w konstruktorze naszej klasy. Oba są ustawione na instancji klasy w czasie budowy, zanim zostanie wywołana jakakolwiek inna funkcja cyklu życia React.

Poniższy przykład demonstruje to alternatywne podejście:

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

Zastępowanie getDefaultProps()

Domyślne wartości rekwizytów komponentów są określone przez ustawienie właściwości defaultProps klasy:

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

Zastępowanie getInitialState()

Idiomatycznym sposobem ustawienia początkowego stanu komponentu jest ustawienie this.state w konstruktorze:

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

Aktualizacja komponentu

componentWillReceiveProps(nextProps)

Jest to pierwsza funkcja wywoływana przy zmianach właściwości .

Kiedy właściwości komponentu ulegną zmianie , React wywoła tę funkcję z nowymi właściwościami . Możesz uzyskać dostęp do starych rekwizytów za pomocą this.props i do nowych rekwizytów za pomocą nextProps .

Za pomocą tych zmiennych można wykonać pewne operacje porównania między starymi i nowymi rekwizytami lub wywołać funkcję, ponieważ zmiana właściwości itp.

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

Jest to druga funkcja wywoływana w przypadku zmian właściwości i pierwsza w przypadku zmian stanu .

Domyślnie, jeśli inny komponent / twój komponent zmieni właściwość / stan twojego komponentu, React wyświetli nową wersję twojego komponentu. W takim przypadku funkcja zawsze zwraca true.

Możesz zastąpić tę funkcję i wybrać bardziej precyzyjnie, czy komponent musi zostać zaktualizowany, czy nie .

Ta funkcja jest najczęściej używana do optymalizacji .

W przypadku, gdy funkcja zwraca false , proces aktualizacji zatrzymuje się natychmiast .

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

Ta funkcja działa jak componentWillMount() . Zmiany nie są w DOM , więc możesz wprowadzić zmiany tuż przed wykonaniem aktualizacji.

/! \: nie można użyć this.setState () .

componentWillUpdate(nextProps, nextState){}

render()

Są pewne zmiany, więc ponownie renderuj komponent.

componentDidUpdate(prevProps, prevState)

Te same rzeczy, co componentDidMount() : DOM został odświeżony , więc możesz tutaj popracować nad DOM.

componentDidUpdate(prevProps, prevState){}

Usunięcie komponentu

componentWillUnmount()

Ta metoda jest wywoływana przed odłączeniem komponentu od DOM.

Jest to dobre miejsce do wykonywania operacji czyszczenia, takich jak:

• Usuwanie detektorów zdarzeń.
• Kasowanie liczników czasu.
• Zatrzymywanie gniazd.
• Usuwanie stanów redux.

componentWillUnmount(){
  ...
}

Przykład usunięcia dołączonego detektora zdarzeń w module componentWillUnMount

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

Reaguj pojemnik z komponentami

Podczas budowania aplikacji React często pożądane jest dzielenie komponentów w oparciu o ich podstawową odpowiedzialność, na komponenty prezentacji i kontenera.
Komponenty prezentacji dotyczą wyłącznie wyświetlania danych - można je traktować jako funkcje przekształcające model w widok i często zaimplementowane jako takie. Zazwyczaj nie utrzymują żadnego stanu wewnętrznego. Komponenty kontenera dotyczą zarządzania danymi. Można tego dokonać wewnętrznie za pośrednictwem ich własnego państwa lub działając jako pośrednicy w bibliotece zarządzania stanem, takiej jak Redux. Komponent kontenera nie wyświetla bezpośrednio danych, a raczej przekazuje dane do komponentu prezentacji.

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

Wywołanie metody cyklu życia w różnych stanach

Ten przykład służy jako uzupełnienie innych przykładów, które mówią o tym, jak korzystać z metod cyklu życia i kiedy metoda zostanie wywołana.

W tym przykładzie podsumowano, które metody (componentWillMount, componentWillReceiveProps itp.) Zostaną wywołane oraz w jakiej kolejności będzie różna dla komponentu w różnych stanach :

Po zainicjowaniu komponentu:

1. getDefaultProps
2. getInitialState
3. componentWillMount
4. renderowanie
5. componentDidMount

Gdy stan składnika ulegnie zmianie:

1. shouldComponentUpdate
2. componentWillUpdate
3. renderowanie
4. componentDidUpdate

Gdy element ma zmienione rekwizyty:

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. renderowanie
5. componentDidUpdate

Gdy składnik jest odmontowywany:

1. componentWillUnmount