ReactJS前端学习-组件生命周期

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