在本章中，我们将讨论组件生命周期方法.
生命周期方法
componentWillMount 在渲染之前在服务器端和客户端执行.
componentDidMount 仅在客户端的第一次渲染后执行.这是AJAX请求和DOM或状态更新应该发生的地方.此方法还用于与其他JavaScript框架和任何具有延迟执行的函数集成，例如 setTimeout 或 setInterval .我们正在使用它来更新状态，以便我们可以触发其他生命周期方法.
componentWillReceiveProps 一旦被支持就会被调用在调用另一个渲染之前更新.我们在更新状态时从 setNewNumber 触发了它.
shouldComponentUpdate 应该返回 true 或 false 值.这将确定组件是否将更新.默认设置为 true .如果您确定在状态或道具更新后无需渲染该组件，则可以返回 false 值.
componentWillUpdate 在渲染之前调用.
在渲染之后立即调用componentDidUpdate .
componentWillUnmount 在从dom卸载组件后调用.我们正在 main.js 中卸载我们的组件.
在下面的示例中，我们将设置初始值构造函数中的 state . setNewnumber 用于更新状态.所有生命周期方法都在Content组件内.
App.jsx
import React from 'react';class App extends React.Component { constructor(props) { super(props); this.state = { data: 0 } this.setNewNumber = this.setNewNumber.bind(this) }; setNewNumber() { this.setState({data: this.state.data + 1}) } render() { return ( INCREMENT ); }}class Content extends React.Component { componentWillMount() { console.log('Component WILL MOUNT!') } componentDidMount() { console.log('Component DID MOUNT!') } componentWillReceiveProps(newProps) { console.log('Component WILL RECIEVE PROPS!') } shouldComponentUpdate(newProps, newState) { return true; } componentWillUpdate(nextProps, nextState) { console.log('Component WILL UPDATE!'); } componentDidUpdate(prevProps, prevState) { console.log('Component DID UPDATE!') } componentWillUnmount() { console.log('Component WILL UNMOUNT!') } render() { return ( {this.props.myNumber}
); }}export default App;main.js
import React from 'react';import ReactDOM from 'react-dom';import App from './App.jsx';ReactDOM.render(, document.getElementById('app'));setTimeout(() => { ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);
在初始渲染之后，我们将看到以下屏幕.
