美文网首页
react中的生命周期

react中的生命周期

作者: 陆一诗 | 来源:发表于2019-12-31 16:39 被阅读0次

挂载阶段(Mount:插入真实DOM)

image.png
    第一次初始化显示: ReactDOM.render(<Xxx/>, containDom)
            constructor()
            componentWillMount() : 将要挂载
            render() : 第一次渲染显示
            componentDidMount() : 已挂载显示
  1. componentWillMount

    • 在组件即将被挂载到页面的时候自动执行。
  2. componentDidMount

    • 组件被已经挂载到页面之后自动执行。(初始显示)该函数代表组件实例化完成,这个时候非常适合执行1. 异步操作(Ajax) 2. 事件订阅

更新阶段(Update阶段:被重新渲染)

组件钩子函数react之更新阶段.png

==componentWillReceiveProps==

一个组件要从父组件接收参数

如果这个组件第一次存在于父组件中,不会执行。

如果这个组件之前已经存在于父组件中,才会执行。

==shouldComponentUpdate==

当函数返回 true 的时候,周期函数会继续往下执行 render 渲染;当函数返回 false,周期函数则会中止于此,并停止下面的渲染。如果不设置,这个函数会默认返回 true。

==componentWillUpdate==

组件被更新之前,它会自动执行,但是前提是shouldComponentUpdate返回true它才执行

==componentDidUpdate==

  • componentDidUpdate 函数会在更新发生后立即被调用。

相关文章

  • Taro 生命周期

    Taro 的生命周期React 生命周期在 Taro 中被保留了,凡是React中的生命周期在Taro中都可以使用...

  • react(最近搞了一套react项目的视频 全套 有需

    React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mou...

  • React开发

    图解ES6中的React生命周期 React-PDF 帮你在 React 应用中展示 PDF 文件 Easily ...

  • React基础篇之组件的生命周期

    引出生命周期 react生命周期(旧) react生命周期(新) getSnapshotBeforeUpdate的...

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React生命周期

    React生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为...

  • React快速上手5-react中的事件和生命周期函数

    这节中我们将主要介绍react应用中的事件和生命周期函数 React事件 在react中,我们不用addEvent...

  • React生命周期

    React v16.0前的生命周期 React v16.4+ 的生命周期图 React v16.9后这些生命周期钩...

  • 4.react生命周期

    面试题 1、React中的生命周期有哪些? 2、React中组件第一次执行的时候会执行哪些生命周期函数 3、ren...

  • react

    react简介 链接 静态编译,CoffeeScript jsx语法 react生命周期 链接 图解ES6中的...

网友评论

      本文标题:react中的生命周期

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