在本章中,我們來了解組件生命周期方法。
setTimeout
或setInterval
)進行集成,在這里使用它來更新狀態(tài),以便我們可以觸發(fā)其他生命周期方法。props
就被調(diào)用。 當(dāng)我們更新狀態(tài)時,從setNewNumber
觸發(fā)它。true
或false
值。 這將決定組件是否將被更新。 默認(rèn)設(shè)置為true
。 如果確定組件在state
或props
更新后不需要渲染,則可以返回false
值。main.js
中的組件。在下面的例子中,將在構(gòu)造函數(shù)中設(shè)置初始狀態(tài)。 setNewnumber
用于更新狀態(tài)。 所有生命周期方法都在內(nèi)容組件中。
文件: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 (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
}
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 (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
}
export default App;
文件:main.js -
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));
setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);
初始渲染之后,應(yīng)該會得到如下演示效果 -
只有componentWillMount
和componentDidMount
將被記錄在控制臺中,因為還沒有更新任何東西。
當(dāng)點擊INCREMENT按鈕時,將發(fā)生更新,并觸發(fā)其他生命周期方法。
十秒鐘后,組件將被卸載,最后一個事件將被記錄在控制臺中。
注 - 生命周期方法將始終以相同的順序調(diào)用,因此按照示例中所示的正確順序編寫生命周期方法是一種很好的做法。