В процессе работы компонент проходит через ряд этапов жизненного цикла. На каждом из этапов вызывается определенная функция, в которой мы можем определить какие-либо действия:
constructor(props): конструктор, в котором происходит начальная инициализация компонента
static getDerivedStateFromProps(props, state): вызывается непосредственно перед рендерингом компонента.
Этот метод не имеет доступа к текущему объекту компонента (то есть обратиться к объкту компоненту через this) и должен возвращать объект для обновления объекта state или значение null
, если нечего обновлять.
render(): рендеринг компонента
componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам
componentWillUnmount(): вызывается перед удалением компонента из DOM
Кроме этих основных этапов или событий жизненного цикла, также имеется еще ряд функций, которые вызываются при обновлении состояния после начального рендеринга компонента, если в компоненте происходят обновления:
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState): вызывается каждый раз при обновлении объекта props или state. В качестве параметра передаются новый объект props и state. Эта функция должна возвращать true (надо делать обновление) или false (игнорировать обновление). По умолчанию возвращается true. Но если функция будет возвращать false, то тем самым мы отключим обновление компонента, а последующие функции не будут срабатывать.
render(): рендеринг компонента (если shouldComponentUpdate возвращает true)
getSnapshotBeforeUpdate(prevProps, prevState): вызывается непосредственно перед обновлением компонента. Он позволяет компоненту получить
информацию из DOM перед возможным обновлением. Возвращает в качестве значения какой-то отдельный аспект, который передается
в качестве третьего параметра в метод componentDidUpdate()
и может учитываться в componentDidUpdate при обновлении. Если нечего возвращать, то возвращается значение
null
componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента (если shouldComponentUpdate возвращает true).
В качестве параметров передаются старые значения объектов props и state. Третий параметр - значение, которое возвращает метод getSnapshotBeforeUpdate
Применим некоторые из событий жизненного цикла:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> <style> button{ width: 100px; height:30px; border-radius: 4px; margin:50px; } .on{ color:#666; background-color: #ccc; } .off{ color:#888; background-color: white; } </style> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> class ClickButton extends React.Component { constructor(props) { super(props); this.state = {class: "off", label: "Нажми"}; this.press = this.press.bind(this); console.log("constructor"); } static getDerivedStateFromProps(props, state) { console.log("getDerivedStateFromProps()"); return null; } componentDidMount(){ console.log("componentDidMount()"); } componentWillUnmount(){ console.log("componentWillUnmount()"); } shouldComponentUpdate(){ console.log("shouldComponentUpdate()"); return true; } getSnapshotBeforeUpdate(prevProps, prevState) { console.log("getSnapshotBeforeUpdate()"); return null; } componentDidUpdate(){ console.log("componentDidUpdate()"); } press(){ var className = (this.state.class==="off")?"on":"off"; this.setState({class: className}); } render() { console.log("render()"); return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>; } } ReactDOM.createRoot( document.getElementById("app") ) .render( <ClickButton /> ); </script> </body> </html>
При загрузке компонента сработают сразу четыре этапа жизненного цикла компонента:
При нажатии на кнопку сработает обработчик нажатия, который обновит объект state, что вызовет еще ряд функций жизненного цикла и повторный рендеринг: