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

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页