Métodos adicionais do ciclo de vida (getDerivedStateFromProps, getSnapshotBeforeUpdate)

Os componentes de classe em React possuem métodos de ciclo de vida adicionais. Dois deles são e . Vamos entender como e quando usá-los.getDerivedStateFromPropsgetSnapshotBeforeUpdate

getDerivedStateFromProps

getDerivedStateFromProps é um método estático. Ele é chamado antes de renderizar o componente. Seu propósito é sincronizar o estado interno com as mudanças nas propriedades. Este método retorna um objeto que atualiza o estado ou se não houver atualizações.null

Exemplo:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.value) {
      return { value: nextProps.value };
    }
    return null;
  }

  render() {
    return <div>{this.state.value}</div>;
  }
}

Neste exemplo, verifica se a propriedade mudou. Se mudou, o estado é atualizado.getDerivedStateFromPropsvalue

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate é chamado antes da atualização do DOM. Ele permite capturar informações do DOM antes que sejam alteradas. Este método retorna um valor que é passado como terceiro argumento para .componentDidUpdate

Exemplo:

class ScrollList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      return this.listRef.current.scrollHeight;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      this.listRef.current.scrollTop += this.listRef.current.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>
        {this.props.list.map(item => (
          <div key={item.id}>{item.text}</div>
        ))}
      </div>
    );
  }
}

Aqui, captura a altura do scroll antes da atualização. usa essa informação para ajustar o scroll após a atualização.getSnapshotBeforeUpdatecomponentDidUpdate

Conclusão

Os métodos e são úteis para gerenciar atualizações de estado e DOM de forma eficiente.getDerivedStateFromPropsgetSnapshotBeforeUpdate

Use para sincronizar estado e propriedades. Utilize para capturar informações do DOM antes de atualizações. Com isso, você tem mais controle sobre o comportamento dos componentes de classe.getDerivedStateFromPropsgetSnapshotBeforeUpdate

Compartilhar

Compartilhar

Siga-me