A diferença entre o antigo e o novo ciclo de vida do react: 1. Três ganchos will foram removidos do novo ciclo de vida, ou seja, componentWillMount, componentWillReceiveProps e componentWillUpdate 2. Dois novos ganchos foram adicionados ao novo ciclo de vida, ou seja, getDerivedStateFromProps; (derivado do estado props) e getSnapshotBeforeUpdate.
O ambiente operacional deste tutorial: sistema Windows7, versão react18, computador Dell G3.
O React tem dois conjuntos de ciclos de vida antes e depois da versão 16.3. Antes da 16.3, era a versão antiga e, depois disso, era a nova versão. Embora existam versões antigas e novas, elas são basicamente as mesmas.
Ciclo de vida do React (antigo)
Vale ressaltar que a função componentWillReceiveProps não será chamada quando os adereços forem passados pela primeira vez. Ela só será chamada quando os adereços forem passados após a segunda vez (inclusive a segunda vez).
shouldComponentUpdate é como uma válvula e precisa de um valor de retorno (true ou false) para determinar se o status desta atualização precisa ser renderizado novamente.
Ciclo de vida do React (novo)
A diferença entre o antigo e o novo ciclo de vida de reação
O novo ciclo de vida remove três ganchos, a saber: componentWillMount, componentWillReceiveProps, componentWillUpdate
O novo ciclo de vida adiciona dois novos ganchos, a saber:
1. getDerivedStateFromProps: Obtenha o estado derivado dos adereços
Aceita dois parâmetros: props, state
Retorna um objeto de estado ou nulo, usado para modificar o valor do estado.
Cenário de uso: se o valor do estado depender de props a qualquer momento, você pode usar getDerivedStateFromProps
2. getSnapshotBeforeUpdate: obtenha o instantâneo antes da atualização (você pode obter os dados antes da atualização)
Chamado antes de atualizar o DOM
Retorna um objeto ou nulo e o valor de retorno é passado para componentDidUpdate
componentDidUpdate(): chamado após atualizar o DOM
Aceita três parâmetros: preProps, preState, snapshotValue
Casos de uso:
O p com altura fixa adiciona uma nova linha regularmente, de modo que, ao adicionar uma nova linha, a altura da linha atualmente visualizada permanece inalterada.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate cenários de uso</title><style>.list{largura: 200px;altura: 150px;cor de fundo: azul celeste ;overflow: auto;}.news{height: 30px;}</style></head><body><!-- Prepare um "contêiner" --><div id="test"></div >< !-- Introduzir a biblioteca principal do react--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- Introduzir react -dom , usado para dar suporte à reação para operar o DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- Introduzir babel para converter jsx em js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type=" text/babel" >class NewsList estende React.Component{ state = {newsArr:[]} componentDidMount(){setInterval(() => {//Obter o estado original const {newsArr} = this.state//Simular uma notícia const news = ' Notícias'+ (newsArr.length+1)//Status de atualização this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} componenteDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - height} render(){return(<div className="list" ref="list"> {this. state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM render(<. NewsList/>,document.getElementById('test'))</script></body></html>ilustrar:
No React v16.3, novas mudanças no ciclo de vida são introduzidas. O ciclo de vida antigo também é usado, mas um aviso de descontinuação pode ser visto no console. Também lembra que três ganchos de ciclo de vida serão descontinuados, portanto, tente não usá-los. Ou você pode adicionar o prefixo UNSAFE_ na frente dele.