React 生命周期

Cc_2011 发布于2019-08-23 13:50 / 1527人阅读

摘要：生命周期生命周期图解初始阶段设置默认属性设置属性类型初始化状态生命周期函数，在组件即将渲染前触发，可以做初始化数据显示。可以使用此方法替换运行时当发生变化的时候，也就是说父组件改变的时候会调用这个方法。

React 生命周期

生命周期图解

初始阶段

设置默认属性 (defaultProps), 设置属性类型 (propTypes)

初始化状态 (state = {})

componentWillMount() -> 生命周期函数，在组件即将渲染前触发，可以做初始化数据显示。(注意：这个方法已经被标为不安全方法，官方不推荐使用)

render() -> 触发了组件渲染

componentDidMount() -> 此时的组件已经生成了DOM结构，可以进行有关操作。可以使用此方法替换componentWillMount

运行时

componentWillReceiveProps() -> 当 props 发生变化的时候，也就是说父组件改变的时候会调用这个方法。但是注意的是，这个方法在初始化render的时候不会执行的

shouldComponentUpdate() -> 组件接收到新属性时，或者组件状态改变时候出发组件更新，在组件初始化渲染的时候不会触发，这个函数可以做为优化组件性能的选择。在react 项目中更新一个组件可能需要其父组件更新，但是一个父组件下可能还会有别的子组件，一旦父组件更新了状态，那么所有子组件都要执行 render 方法，这样就太耗费性能了。所以可以使用 shouldComponentUpdate() 方法判断是否应该更新。其实你还可以通过继承 PureComponent 类，如果继承了这个类，那么在组件更新时候就会先去和之前的属性判断，从而判断是否应该更新

componentWillUpdate() -> 组件即将被触发更新

componentDidUpdate() -> 组件更新完成后生成新DOM

销毁阶段

componentWillUnmount() -> 这是在组件被销毁时执行的方法。

私有云服务器托管生命周期软件生命周期生命周期理论页面生命周期

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

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

React专题：生命周期

摘要：而生命周期钩子，就是从生到死过程中的关键节点。异步渲染下的生命周期花了两年时间祭出渲染机制。目前为这几个生命周期钩子提供了别名，分别是将只提供别名，彻底废弃这三个大活宝。生命周期钩子的最佳实践是在这里初始化。本文是『horseshoe·React专题』系列文章之一，后续会有更多专题推出来我的 GitHub repo 阅读完整的专题文章来我的个人博客获得无与伦比的阅读体验生命周期...

Hanks10100 2019-08-23 11:25 评论0 收藏0
捋一捋React的生命周期

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

MobService 2019-08-23 15:20 评论0 收藏0
ReactV16.3，即将更改的生命周期

摘要：我们目前的计划是为不安全生命周期引入别名，和。从现在开始，只有新的生命周期名称将起作用。从版本开始，更新以响应更改的推荐方法是使用新的静态生命周期。注释：本文是根据React的官方博客翻译而成（文章地址：https://reactjs.org/blog/2018...）。主要讲述了React之后的更新方向，以及对之前生命周期所出现的问题的总结，之后的React将逐步弃用一些生命周期和...

wendux 2019-08-22 16:28 评论0 收藏0
React组件生命周期详解

摘要：组件生命周期构造方法是对类的默认方法，通过命令生成对象实例时自动调用该方法。该生命周期可以发起异步请求，并。后废弃该生命周期，可以在中完成设置渲染组件是一个组件必须定义的生命周期，用来渲染。该生命周期内可以进行。 React组件生命周期 constructor( ) 构造方法 constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是...

learn_shifeng 2019-08-22 17:31 评论0 收藏0
React.js 小书 Lesson20 - 更新阶段的组件生命周期

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

Yumenokanata 2019-08-21 17:34 评论0 收藏0
React组件生命周期

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

mgckid 2019-08-20 10:42 评论0 收藏0