生命周期

組件的運行過程中，存在不同的階段。React 為這些階段提供了鉤子方法，允許開發者自定義每個階段自動執行的函數。這些方法統稱為生命周期方法（lifecycle methods）。

?生命周期示例：

import React from 'react'; //第一步，導入React class LifeCycle extends React.Component {constructor(props) {super(props);//構造方法console.log("constructor()");}componentDidMount() {//組件掛載后調用console.log("componentDidMount()");}componentWillUnmount() {//在組件從 DOM 中移除之前立刻被調用。console.log("componentWillUnmount()");}componentDidUpdate() {//在組件完成更新后立即調用。在初始化時不會被調用。console.log("componentDidUpdate()");}shouldComponentUpdate(nextProps, nextState) {// 每當this.props或this.state有變化，在render方法執行之前，就會調用這個方法。// 該方法返回一個布爾值，表示是否應該繼續執行render方法，即如果返回false，UI 就不會更新，// 默認返回true。// 組件掛載時，render方法的第一次執行，不會調用這個方法。console.log("shouldComponentUpdate()");}render() {return (<div><h1>React Life Cycle!</h1></div>);} }export default LifeCycle;

測試結果：

?

總結

以上是生活随笔為你收集整理的ReactJS入门之声明周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。