美文网首页
React的生命周期

React的生命周期

作者: 他爱在黑暗中漫游 | 来源:发表于2018-06-25 23:59 被阅读12次

    React 生命周期分为四个大阶段

    Mounting 第一次渲染阶段

    constructor() 组件类的构造函数,一般用于数据的初始化,例如 state
    这里获取不到 DOM
    render() 组件类的渲染函数,用于渲染组件的模板
    这里也获取不到 DOM
    componentDidMount() 组件完成了第一次的解析渲染
    这里是第一次可以通过 ref 获取到 DOM 的钩子,适合一上来就操作 DOM 的业务需求
    以上三个钩子函数在完成第一次渲染之后就不再执行了

    Updating 更新渲染阶段(当state数据发生改变的时候)

    render() 先调用渲染函数(数据是新的,模板是旧的)
    componentDidUpdate() 渲染完成
    调用该函数(数据是新的,模板也是新的)

    Unmounting 卸载阶段

    例如当组件处于条件渲染过程中,当不满足条件就不会渲染该组件,那么就会触发 Unmounting 阶段的生命周期函数
    componentWillUnmount() 这里一般适合做一些收尾工作,例如组件运行期间开启的定时器

    Error Handling 错误处理阶段

    componentDidCatch() 当组件在渲染期间发生错误,则会进入该钩子函数,可以在这里提供一些渲染出错的错误提示

    相关文章

      网友评论

          本文标题:React的生命周期

          本文链接:https://www.haomeiwen.com/subject/siguyftx.html