React 生命周期钩子

tain335 发布于2019-08-22 17:59 / 3402人阅读

摘要：个阶段挂载阶段构造方法，接收一个属性对象，由父组件传入，如果父组件未传入，则指向自身。在其中调用会引起组件重新渲染，组件本次的更新还没有执行完成，又会进入新一轮的更新，导致不断循环更新，进入死循环。副作用操作，通常用于向后端请求数据。

3个阶段

挂载阶段

constructor

componentWillMount

render

componentDidMount

1. constructor

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {}
}

ES6 class构造方法，接收一个props属性对象，props由父组件传入，如果父组件未传入，则指向自身。

通常用于初始化state,以及绑定事件处理方法等工作

2.componentWillMount

组件被挂载到DOM前，只会调用1次, 一般用用更靠前的constructor代替，在其中调用this.setState()不会引起组件重新渲染。

3. render

组件的唯一必要方法，根据组件的props与state返回一个React元素，用于描述组件的UI

4.componentWillMount

组件被挂载到DOM后调用，且只会被掉用一次。在其中调用this.setState()会引起组件重新渲染，组件本次的更新还没有执行完成，又会进入新一轮的更新，导致不断循环更新，进入死循环。
副作用操作，通常用于向后端请求数据。

更新阶段

componentWillReceiveProps(nextProps)

shoudComponentUpdate(nextProps, nextSate)

componentWillUpdate

render

componentDidUpadate(prevProps, prevState)

1.componentWillReceiveProps(nextProps)

props变化会触发componentWillReceiveProps，setState()不会触发

2.shoudComponentUpdate(nextProps, nextSate)

判断组件是否继续更新,减少不必要渲染，优化

3.componentWillUpdate

在render前调用，作为组件更新前执行某些工作过的地方，（shoudComponentUpdate， componentWillUpdate 不能调用setState()避免引起循环调用）

4.componentDidUpadate(prevProps, prevState)

组件更新后调用，可以作为更新后调用DOM的地方，两个参数代表prevProps, prevState，
更新前的属性和状态。

卸载阶段

组件从DOM中移除的阶段。可用于清楚组件中使用中的定时器，清除componentDidMount手动创建的DOM等等，避免内存泄露。

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/95376.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
React 生命周期

摘要：同步渲染的痛点当应用的组件树特别庞大时，由于是单线程的，重新渲染一旦开始，中间不会停，如果这时候用户去操作，比如输入，点击按钮，此时页面是没有响应的。 React生命周期基础生命周期钩子 constructor 如果你不初始化状态，也不绑定方法，那么你就不需要为React组件实现构造函数。在这里初始化状态可以直接对this.state赋值，在这里使用props时，应当通过this.p...

Dean 2019-08-26 13:34 评论0 收藏0
React-新的生命周期（React16版本）

摘要：组件生命周期的三个阶段加载阶段更新阶段卸载阶段旧的生命周期加载阶段涉及个钩子函数加载的时候调用一次，可以初始化设置默认的，也可以用设置组件的默认属性。组件生命周期的三个阶段 Mounting（加载阶段） Updating（更新阶段） Unmounting（卸载阶段）旧的生命周期 showImg(https://segmentfault.com/img/bVbhRhS?w=761...

chinafgj 2019-08-23 12:15 评论0 收藏0
【全栈React】第7天: 生命周期钩子函数

摘要：本文转载自众成翻译译者链接原文今天，我们将看看我们可以用于组件的一些最常见的生命周期钩子函数，我们将讨论为什么它们是有用的，什么时间应该用什么。我们使用的一个更常见的生命周期钩子是钩子。这些是我们可以在框架中进行交互的一些生命周期钩子。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3827原文：https://www.full...

Joyven 2019-08-20 18:33 评论0 收藏0
React组件生命周期详解

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

learn_shifeng 2019-08-22 17:31 评论0 收藏0