La diferencia entre los ciclos de vida antiguos y nuevos de reaccionar: 1. Se eliminaron tres ganchos de voluntad del nuevo ciclo de vida, a saber, componenteWillMount, componenteWillReceiveProps y componenteWillUpdate. 2. Se agregaron dos nuevos ganchos al nuevo ciclo de vida, a saber, getDerivedStateFromProps; (derivado del estado de accesorios) y getSnapshotBeforeUpdate.
El entorno operativo de este tutorial: sistema Windows7, versión reaccionar18, computadora Dell G3.
React tiene dos conjuntos de ciclos de vida antes y después de la versión 16.3. Antes de la 16.3, era la versión anterior, y después de eso, era la versión nueva. Aunque hay versiones antiguas y nuevas, son básicamente las mismas.
Reaccionar ciclo de vida (antiguo)
Vale la pena enfatizar que la función componenteWillReceiveProps no se llamará cuando se pasen accesorios por primera vez. Solo se llamará cuando se pasen accesorios después de la segunda vez (incluida la segunda vez).
mustComponentUpdate es como una válvula y necesita un valor de retorno (verdadero o falso) para determinar si es necesario volver a representar el estado de esta actualización.
Reaccionar ciclo de vida (nuevo)
La diferencia entre los ciclos de vida antiguos y nuevos de reaccionar.
El nuevo ciclo de vida elimina tres ganchos de voluntad, a saber: componenteWillMount, componenteWillReceiveProps, componenteWillUpdate
El nuevo ciclo de vida agrega dos nuevos ganchos, a saber:
1. getDerivedStateFromProps: obtiene el estado derivado de los accesorios
Acepta dos parámetros: props, estado
Devuelve un objeto de estado o nulo, utilizado para modificar el valor del estado.
Escenario de uso: si el valor del estado depende de los accesorios en cualquier momento, puede usar getDerivedStateFromProps
2. getSnapshotBeforeUpdate: obtiene la instantánea antes de la actualización (puede obtener los datos antes de la actualización)
Llamado antes de actualizar el DOM.
Devuelve un objeto o nulo y el valor de retorno se pasa a componenteDidUpdate
componenteDidUpdate(): llamado después de actualizar el DOM
Acepta tres parámetros: preProps, preState, snapshotValue
Casos de uso:
La p con una altura fija agrega una nueva fila regularmente, de modo que al agregar una nueva fila, la altura de la fila vista actualmente permanece sin cambios.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate escenarios de uso</title><style>.list{ancho: 200px;alto: 150px;color de fondo: azul cielo ;overflow: auto;}.news{height: 30px;}</style></head><body><!-- Prepare un "contenedor" --><div id="test"></div >< !-- Introducir la biblioteca principal de reacción--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- Introducir reaccionar -dom , utilizado para admitir reaccionar para operar DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- Introducir babel para convertir jsx a js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type=" text/babel" >class NewsList extiende React.Component{ state = {newsArr:[]} componenteDidMount(){setInterval(() => {//Obtener el estado original const {newsArr} = this.state//Simular una noticia const news = ' News'+ (newsArr.length+1)//Actualizar estado this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} componenteDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - altura} render(){return(<div className="list" ref="list"> {this. state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM. NewsList/>,document.getElementById('prueba'))</script></body></html>ilustrar:
En React v16.3, se introducen nuevos cambios en el ciclo de vida. También se utiliza el ciclo de vida anterior, pero se puede ver una advertencia de obsolescencia en la consola. También recuerda que tres ganchos del ciclo de vida quedarán obsoletos, así que trate de no usarlos. O puede agregar el prefijo UNSAFE_ delante.