了解React组件生命周期

王军发布于2019-08-21 17:13 / 278人阅读

摘要：问题了解组件的生命周期知识点流程状态图注意流程状态图为使用方法的生命周期使用获取后台数据渲染时，一般将调用方法放在中，这样可以先渲染虚拟再展示数据，当再次调用数据改变时，内数据会再次渲染，而不用再次加载整个。

问题

了解React组件的生命周期

知识点

React流程状态图

注意：流程状态图为使用React.createClass方法的生命周期

使用ajax获取后台数据渲染时，一般将调用ajax方法放在componentDidMount中，这样可以先渲染虚拟dom再展示数据，当再次调用ajax数据改变时，dom内数据会再次渲染，而不用再次加载整个dom。如果在该dom要根据条件只通过ajax获取一次数据，则可以将调用ajax的方法放在componentWillMount。

当工程中未加载jQuery，异步请求也可以使用fetch等

在componentWillUpdate中，尽量避免使用setState()或setProps()方法。若无条件判断情况下使用setState()或setProps()，会导致死循环，同样componentDidUpdate中使用setState()若无条件限制也会导致死循环。

通过shouldComponentUpdate可以对是否进行渲染的条件判断，能够作为性能调优的手段，避免无意义渲染。

componentWillReceiveProps可以通过nextProps获取新传入的参数值，例如：nextProps.operationType获取operationType

建议使用setState()的周期为：componentWillMount、componentDidMount、componentWillReceiveProps、componentDidUpdate

注意对应周期中this.state的值

通过构建列表树后总结补充：

setState不会立即生效，要经过render过程才能真正改变state值

在return时调用方法setState，会引起shouldComponentUpdate周期，而此时componentDidMount周期已完成。

参考文章

React组件生命周期过程说明
React组件生命周期
React数据获取为什么一定要在componentDidMount里面调用？

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

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

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

不了解一下React16.3之后的新生命周期？

摘要：本文主要介绍之后的生命周期。该方法有两个参数和返回值为对象不需要返回整体，把需要改变的返回即可。必须有一个返回值，返回的数据类型可以有。此生命周期主要用于优化性能。最后，说明一点这三个生命周期在未来版本中会被废弃。 React16.3.0开始，生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react组件的...

468122151 2019-08-23 15:41 评论0 收藏0
React.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
Hooks 与 React 生命周期的关系

摘要：更新阶段卸载阶段兄弟节点之间的通信主要是经过父组件和也是通过改变父组件传递下来的实现的，满足的设计遵循单向数据流模型，因此任何两个组件之间的通信，本质上都可以归结为父子组件更新的情况。你真的了解 React 生命周期吗？ React 生命周期很多人都了解，但通常我们所了解的都是单个组件的生命周期，但针对 Hooks 组件、多个关联组件（父子组件和兄弟组件）的生命周期又是怎么样的...

oliverhuang 2019-08-26 10:25 评论0 收藏0
React组件生命周期

摘要：组件生命周期此文章适合之前的版本，，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。每个生命周期阶段调用的钩子函数会略有不同。 React组件生命周期此文章适合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函数，同时准备废弃一些会造成困扰的生命周期函数。所有如果在React@17 发布之前，这篇文章还是适用的。新的生命周期请看官...

mgckid 2019-08-20 10:42 评论0 收藏0
浅谈React Fiber

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

izhuhaodev 2019-08-26 10:43 评论0 收藏0