Разница между старым и новым жизненным циклом реакции: 1. Из нового жизненного цикла были удалены три хука, а именно: компонентWillMount, компонентWillReceiveProps и компонентWillUpdate. 2. В новый жизненный цикл были добавлены два новых хука, а именно getDerivedStateFromProps; (получено из состояния реквизита) и getSnapshotBeforeUpdate.
Операционная среда этого руководства: система Windows7, версия React18, компьютер Dell G3.
У React есть два набора жизненных циклов до и после версии 16.3. До версии 16.3 это была старая версия, а после — новая версия. Хотя существуют старые и новые версии, по сути они одинаковы.
Жизненный цикл React (старый)
Стоит подчеркнуть, что функция компонентWillReceiveProps не будет вызываться при первой передаче реквизита. Она будет вызываться только при передаче реквизита после второго раза (включая второй раз).
mustComponentUpdate похож на клапан и требует возвращаемого значения (истина или ложь), чтобы определить, нужно ли повторно отображать статус этого обновления.
Жизненный цикл React (новое)
Разница между старым и новым жизненным циклом реакции
Новый жизненный цикл удаляет три перехватчика, а именно: компонентWillMount, компонентWillReceiveProps, компонентWillUpdate.
Новый жизненный цикл добавляет два новых хука, а именно:
1. getDerivedStateFromProps: получить производное состояние из реквизита.
Принимает два параметра: реквизит, состояние
Возвращает объект состояния или значение NULL, используемое для изменения значения состояния.
Сценарий использования: если значение состояния в любой момент зависит от реквизита, вы можете использовать getDerivedStateFromProps.
2. getSnapshotBeforeUpdate: получить снимок перед обновлением (вы можете получить данные до обновления).
Вызывается перед обновлением DOM
Возвращает объект или значение NULL, а возвращаемое значение передается в компонентDidUpdate.
компонентDidUpdate(): вызывается после обновления DOM
Принимает три параметра: preProps, preState, snapshotValue.
Варианты использования:
P с фиксированной высотой регулярно добавляет новую строку, так что при добавлении новой строки высота просматриваемой в данный момент строки остается неизменной.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate сценарии использования</title><style>.list{width: 200px;height: 150px;background-color: skyblue ;overflow: auto;}.news{height: 30px;</style></head><body><!-- Подготовьте "контейнер" --><div id="test"></div >< !-- Представляем основную библиотеку реакции--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- Представляем реакцию -dom , используемый для поддержки реагирования на работу с DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- Введение Babel для преобразования jsx в js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type=" text/babel" >class NewsList расширяет React.Component{state = {newsArr:[]} компонентDidMount(){setInterval(() => {//Получить исходное состояние const {newsArr} = this.state//Имитировать новость const news = ' News'+ (newsArr.length+1)//Обновить статус this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} компонентDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - высота} 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>проиллюстрировать:
В React v16.3 внесены новые изменения в жизненном цикле. Также используется старый жизненный цикл, но на консоли можно увидеть предупреждение об устаревании. Он также напоминает, что три перехватчика жизненного цикла станут устаревшими, поэтому постарайтесь их не использовать. Или вы можете добавить перед ним префикс UNSAFE_.