随便扯扯React生命周期 --《爱看不看系列》

  生命周期嘛,顾名思义,就是说组件这辈子从生下来到死掉经历的事情。先来看看一张图片,温故温故,如图:

你会发现有些周期的名字都能找出点规律,我找到的规律是凡是 Will 字母的,表示该钩子函数会在该生命周期发生之前调用;包含前缀did表示该钩子函数会在该生命周期发生之后调用。

大概给生命周期分及各类:

1、Mounting(挂载)

  1. constructor()
  2. componentWillMount()
  3. render()
  4. componentDidMount()

上面几个函数会在组件被创建和插入到DOM后调用

2、Updating(更新)

  1. componentWillReceiveProps()
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. render()
  5. componentDidUpdate()

props 或者 state 的变化都会导致更新。上面这些方法会在 组件 重新渲染时调用。

3、Unmounting

  1. componentWillUnmount()

该方法将会在 组件 从DOM中移除时调用

分完类之后就来依次说说各个组件是干什么的咯,怕是每个写react的程序员都会有自己的见解咯。

  1. componentWillMount()

这个组件个人觉得争议很大,有的人说可以在这个钩子函数内写ajax请求,有的说不行,我还是保持我自己的观念,

不能在里面使用setState方法来更新组件,因为它是在render函数之前执行的,也就是说执行它的时候,DOM节点

是还没有挂在的,强行setState会导致React Component 的 re-render。

  2. componentDidMount()

这个函数在组件挂在之后执行的,所以比较适合用作初始化DOM节点的操作和AJAX请求。

在该钩子函数里面,可以使用 setState 但是会触发重新渲染 re-render 。 

  3.componentWillReceiveProps(nextProps)

该钩子函数将会在已挂载组件(mounted component)接收到新的 props 之前调用。适用于更新state的值(重新渲染)

比较this.props和nextProps。有一个要注意的地方就是,props即使没有变化,也会调用这个钩子函数,所以,一般我们的

做法就是比较this.props和nextProps。

  4.shouldComponentUpdate(nextProps, nextState)

当组件接收到新的 Props 或者 state时,要进行 rendering之前会调用 shouldComponentUpdate()。该钩子函数用于告诉 React 组件是否需要重新渲染。

shouldComponentUpdate() 默认返回 true

shouldComponentUpdate() 在两种情况下不会被调用:1、初始化渲染;2、使用了forceUpdate()方法。

但是当 shouldComponentUpdate() 返回 false 的时候,此时 state 发生改变,并不能阻止 child component 进行重新渲染。
但是一旦 shouldComponentUpdate() 返回 false,这就意味着 componentWillUpdate()、 render() 和 componentDidUpdate() 将不再执行。

  5.componentWillUpdate()

state or props 更新后re-render之前调用。
不能在这里调用 setState,如果需要设置 state,应该在 componentWillReceiveProps() 中调用 setState().

  6.componentDidUpdate

在组件更新之后马上调用。在该钩子函数内,你可以:1、操作DOM;2、发起网络请求

  7.componentWillUnmount

在组件卸载和销毁前调用。在该钩子函数内可以做一些清除工作,比如:1、取消定时器;2、取消网络请求;3、绑定DOM事件。

时间: 2024-08-27 10:22:58

随便扯扯React生命周期 --《爱看不看系列》的相关文章

vue与 react 生命周期

Vue vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render

react生命周期方法

每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的"生命周期方法".方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特定环节之后被调用. react生命周期可分为三个状态以及对应的方法 Mounting(装配) constructor() React组件的构造函数将会在装配之前被调用. componentWillMount() 在渲染前调用,在客户端也在服务端. render() 所有组件类都必须有自己的 render 方法,用于输出组件.

前端005/React生命周期

ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生命周期函数 (一).初始化阶段 1.设置组件的默认属性 static defaultProps = { name: 'sls', age:23 }; //or Counter.defaltProps={name:'sls'} 复制代码 2.设置组件的初始化状态 constructor() { sup

vue生命周期和react生命周期对比

一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></

react生命周期知识点

react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.render5.componentDidMount 当组件在服务端被实例化,首次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.r

React生命周期学习整理

一.React生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性. 2.getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state.此时可以访问this.props 3.componentWillMount() 组件初始化时只调用,以后组件更新不调用,整个生命周期

react生命周期

1.getDefaultProps 作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享. 2.getInitialState 作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props. 3.componentWillMount 在完成首次渲染之前调用,此时仍可以修改组件的state. 4.render 必选的方法,创建虚拟DOM,该方法具有特殊的规则: 只能通过this.props和this.state访问数据

理解React生命周期的好例子

class App extends React.Component { static propTypes = { }; static defaultProps = { }; constructor(props) { super(props); this.state = { data: 0 }; } componentWillUnMount() { } componentWillReceiveProps(nextProps) { } shouldComponentUpdate(nextProps,

react生命周期总结

当通过createClass创建了组件之后,该React组件就有了生命周期.通常一个React组件的生命周期可分为三个阶段: Mounting:挂载组件,也就是组件实例化 ReciveProps:存在期,在这个时期组件的props和state会变化,重新渲染组件 Unmounting:卸载组件,也就是组件被销毁 React在生命周期中提供了10种API: 1.getDefaultProps():作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享. 2.getI