ReactJS前端學習-元件生命週期

希望原野發表於2020-12-04

State & 生命週期

生命週期是元件載入的一個流程

  • 初始化元件
  • 渲染元件
  • 更新元件
  • 刪除元件

參考 https://zh-hans.reactjs.org/docs/state-and-lifecycle.html#gatsby-focus-wrapper

 

研究元件的生命週期

  • mounting載入元件

       constructor() 構造器函式 初始化資料狀態,比如state初始化

       render() 返回一個Virtual DOM

       componentDidMount() DOM節點插入之後呼叫的生命函式。元件掛載後(插入DOM樹後)立即呼叫,網路請求來獲取資料,資料狀態更改

class App extends React.Component{
    constructor(){
        super();
        this.state={
            name:"alxor"
        }
        console.log("元件初始化...");
        this.click = this.click.bind(this);
    }
    //事件函式
    click(){
        this.setState({
            name:"hello alxor"
        });
    }
    componentDidMount(){
        console.log("DOM節點插入之後");
    }
    render(){
        console.log("render......");
        return (
            <div>
            <p>this.state.name</p>
            <button onClick = {this.click}></button>
            </div>
        )
    }
}
  • updating更新元件:當狀態資料發生改變,會觸發這個生命函式

class App extends React.Component{
    constructor(){
        super();
        this.state={
            name:"alxor"
        }
        console.log("元件初始化...");
    }
    componentDidMount(){
        console.log("DOM節點插入之後");
    }
    //元件更新之後會呼叫這個生命週期函式
    componentDidUpdate(){
        console.log("componentDidUpdate......");
    }
    render(){
        console.log("render......");
        return (
            <div>
            <p>this.state.name</p>
            </div>
        )
    }
}
  • unmounting 解除安裝元件

componentWillUnmount()元件在解除安裝之前會呼叫這個方法

ReactDOM.unmountComponentAtNode(container)

  • 用於解除安裝元件,引數就是插入元件的容器,dom物件是我們document.getElementById獲取的根節點
class App extends React.Component{
    constructor(){
        super();
        this.state={
            name:"alxor"
        }
        console.log("元件初始化...");
    }
    componentDidMount(){
        console.log("DOM節點插入之後");
    }
    //元件更新之後會呼叫這個生命週期函式
    componentDidUpdate(){
        console.log("componentDidUpdate......");
    }
    componentWillUnmount(){
        console.log("componentWillUnmount()======");
    }
    render(){
        console.log("render......");
        return (
            <div>
            <p>this.state.name</p>
            <button onClick = {this.click}>點選更改state</button>
            <button onClick = {()=> {ReactDOM.unmount(ComponentAtNode(container))}>解除安裝元件</button>
            </div>
        )
    }
}

 

相關文章