React16 生命周期理解

Flands 发布于2019-08-23 14:38 / 2963人阅读

摘要：完整生命周期初始化参数第一次渲染当父组件向子组件传入发生改变后，依次调用子组件更新渲染当组件自身发生变化后组件再次更新渲染当组件卸载生命周期详解此处请求接口数据子组件获得新时触发，作用是在子组件再次渲染前，更新子组件自身的，之后会触发接受的

完整生命周期

constructor(props) // 初始化参数

componentWillMount()

render() // 第一次渲染 

componentDidMount()

当父组件向子组件传入props发生改变后，依次调用

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState) 

componentWillUpdate()

render() //子组件更新渲染

componentDidUpdate()

当组件自身state发生变化后

componentWillUpdate()

render() //组件再次更新渲染

componentDidUpdate()

当组件卸载

componentWillUnmount()

生命周期详解

componentDidMount() 此处请求接口数据

componentWillReceiveProps(nextProps) 子组件获得新props时触发，作用是在子组件再次渲染前，更新子组件自身的state，之后会触发shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState) 接受的props发生变化或者自身state变化都会触发该生命周期，在此生命周期可以做一些渲染的优化，默认返回true，就是默认需要更新组件，重新渲染，nextProps nextState 都是新state 新props，this.props this.state 表示旧的props state，根据需求做优化，比如在某些情况下返回false，便不再进行组件更新了，提升页面性能

static getDerivedStateFormProps(nextProps, prevState)
替代 componentWillReceiveProps 返回的结果会送给setState 如果什么都不改变就返回null
static 声明静态函数，无法访问this，也就是一个纯函数，输出完全由输入决定
除了shouldComponentUpdate之外，render前的所有生命周期都被替代
返回新的state，重新进行setSate后，react会去控制不再进行新的更新
AJAX请求在依旧在componentDidMount 中进行，只有在一些特定情况下实用 （此处还未深入了解
貌似用的场景很少
eg: 
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(nextProps); // 新传入的props
    console.log(prevState); // 旧的state
    //console.log(this.props);
    return {
      value: nextProps.value
    }
  }

例子

这个例子让你更好的理解几个生命周期的作用   Github地址在这里

参考react官方文档 State & 生命周期 && 性能优化 章节

云服务器 GPU云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100903.html

浅谈React Fiber

摘要：因为版本将真正废弃这三生命周期到目前为止，的渲染机制遵循同步渲染首次渲染，更新时更新时卸载时期间每个周期函数各司其职，输入输出都是可预测，一路下来很顺畅。通过进一步观察可以发现，预废弃的三个生命周期函数都发生在虚拟的构建期间，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段时间准备前端招聘事项...

izhuhaodev 2019-08-26 10:43 评论0 收藏0
捋一捋React的生命周期

摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来...

MobService 2019-08-23 15:20 评论0 收藏0
React16时代，该用什么姿势写 React ?

摘要：的返回值将作为的参数，如果返回，则不更新，不能返回或以外的值，否则会警告。在更新之前调用，此时已更新返回值作为的第个参数一般用于获取之前的数据语法是从的返回值，默认是的使用场景一般是获取组建更新之前的滚动条位置。 React16 后的各功能点是多个版本陆陆续续迭代增加的，本篇文章的讲解是建立在 16.6.0 版本上本篇文章主旨在介绍 React16 之后版本中新增或修改的地方，所以对于...

Reducto 2019-08-23 15:33 评论0 收藏0
从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

ZweiZhao 2019-08-02 11:52 评论0 收藏0
从Mixin到hooks，谈谈对React16.7.0-alpha中即将引入的hooks的理解

摘要：已经被废除，具体缺陷可以参考二为了解决的缺陷，第二种解决方案是高阶组件简称。我们定义了父组件，存在自身的，并且将自身的通过的方式传递给了子组件。返回一个标识该的变量，以及更新该的方法。为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在Reac...

funnyZhang 2019-08-29 17:09 评论0 收藏0