ReactJS 组件生命周期
在本章中,我们将讨论组件生命周期方法。
生命周期方法componentWillMount 在渲染之前在服务器和客户端上均已执行。
componentDidMount仅在客户端执行第一个渲染之后执行。这是应该进行AJAX请求和DOM或状态更新的地方。此方法还用于与其他JavaScript框架以及延迟执行的任何函数(例如setTimeout或)集成setInterval。我们正在使用它来更新状态,以便我们可以触发其他生命周期方法。
componentWillReceiveProps道具更新后立即调用,然后调用另一个渲染器。我们是从setNewNumber更新状态时触发的。
shouldComponentUpdate应该返回true或false值。这将确定组件是否将被更新。true默认情况下设置为。如果您确定组件不需要在更新后state或props更新后呈现,则可以返回false值。
componentWillUpdate 在渲染之前被调用。
componentDidUpdate 在渲染后立即调用。
componentWillUnmount从dom卸下组件后调用。我们正在中卸载组件main.js。
在下面的示例中,我们将state在构造函数中设置初始值。将setNewnumber用于更新的state。所有生命周期方法都在Content组件内部。
App.jsximport 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.jsimport 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);
初始渲染后,我们将获得以下屏幕。