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.getDerivedStateFromProps
getSnapshotBeforeUpdate
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.getDerivedStateFromProps
value
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.getSnapshotBeforeUpdate
componentDidUpdate
Conclusão
Os métodos e são úteis para gerenciar atualizações de estado e DOM de forma eficiente.getDerivedStateFromProps
getSnapshotBeforeUpdate
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.getDerivedStateFromProps
getSnapshotBeforeUpdate