美文网首页
React生命周期的图解

React生命周期的图解

作者: kim_jin | 来源:发表于2019-09-29 10:18 被阅读0次

声明周期的概括图

生命周期

生命周期的划分

初始化阶段

  • defaultProps 设置组件的默认属性
  • constructor 设置组件的初始化状态
  • componentWillMount()即将被废弃的声明周期
  • render()组件渲染
  • componentDidMount() 组件已经被渲染到页面中后触发

componentWillMount被废弃的理由:如果在componentWillMount中发送异步请求,在SSR(服务端渲染)的情况下,服务端与客户端共用一套组件原代码,此时会发出两次请求(服务端请求一次、客户端请求一次),服务端的请求是多余的。如果将异步请求放在componentDidMount中,服务器不会执行componentDidMount生命周期函数,可以减少不必要的请求。
componentDidMount:另外提醒在這邊綁定DOM eventListener,記得在willUnMount取消綁定EventListener,如果重新render元件會再次執行DidMount,造成過多的綁定事件。

运行阶段

  • componentWillReceiveProps(nextProps)组件接收到属性时触发,丢弃
  • shouldComponentUpdate(nextProps, nextState)
  • componentWillUpdate(nextProps, nextState)组件即将被更新时触发,丢弃
  • componentDidUpdate(nextProps, nextState) 组件被更新完成后触发。页面中产生了新的DOM的元素,可以进行DOM操作

componentWillReceiveProps(nextProps):会回传更新过的props,并且可以使用setState来更新state,但是这里使用setState,并不会重新执行componentWillReceiveProps,因为ReceiveProps只会在更新传递的props的时候进行调用。

shouldComponentUpdate:当组件接收到新属性,或者组件的状态发生改变时触发。组件首次渲染时并不会触发,这个生命周期的返回值是布尔值,会显示后续是否进行重新的渲染

componentWillUpdate:在这个生命周期使用setState,会导致重新跑回到updata的生命周期,然后在跑到componentWillUpdate,如果不慎用的话,会导致反复的执行。

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//该钩子函数可以接收到两个参数,新的属性和状态,返回`true/false`来控制组件是否需要更新。

我们使用这个生命周期一般用于优化,有的时候,我们在界面上只需要更新一个很小的组件,而一个父组件的更新会造成整个子组件都进行渲染,形成一个崭新的虚拟DOM,但是这样的话,会造成资源的浪费,我们可以根据实际的开发情况在shouldComponentUpdate()生命周期加入条件,来进行性能的优化。

销毁阶段

  • componentWillUnmount()有的是对轮询的请求的清理,有的是对定时器的清理,根据实际情况来订。

将要废弃的声明周期

  • componentWillMount() -> 17版废弃
  • componentWillReceiveProps(nextProps) -> 17版废弃
  • componentWillUpdate(nextProps, nextState) -> 17版废弃

相关文章

  • React开发

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

  • react

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

  • React生命周期

    V16.3之前 图解 生命周期总览 react的生命周期大概分为 组件装载(Mount)组件第一次渲染到Dom树 ...

  • 图解React生命周期

    图片来自:https://segmentfault.com/a/1190000016494335 1、如图所示,组...

  • React生命周期的图解

    声明周期的概括图 生命周期的划分 初始化阶段 defaultProps 设置组件的默认属性 constructor...

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

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

  • react-native 生命周期

    (一)、图解 基本总结: 从图看:在React Native中,组件的生命周期大致可以分为3个阶段(实例化阶段,存...

  • [转]react-native 生命周期

    (一)、图解 基本总结: 从图看:在React Native中,组件的生命周期大致可以分为3个阶段(实例化阶段,存...

  • React概念图

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

  • React生命周期

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

网友评论

      本文标题:React生命周期的图解

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