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>
        )
    }
}