Основные события для компонентов
- constructor(props): конструктор, в котором происходит начальная инициализация компонента
- componentWillMount(): вызывается непосредственно перед рендерингом компонента
- render(): рендеринг компонента
- componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам
- componentWillUnmount(): вызывается перед удалением компонента из DOM
Рассмотрим код, демонстрирующий освобождение ресурсов
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date(), name: "Tom"}; } componentDidMount() { this.timerId = setInterval( ()=> this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerId); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Привет, {this.state.name}</h1> <h2>Текущее время {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById("app") ) </script> </body> </html> |