React生命周期函数

装载组件触发

0.construct(props) 用来 props--->state

初始化state,并且把props转化为state

1.componentWillMount   用来 props--->state,用构造函数就可以了,这个我们一般不用

只会在装载之前调用一次,在render之前调用,你可以在这个方法里面调用setState 改变状态,并且不会导致额外调用一次render,不能有副作用在里面

 

2.componentDidMount    页面初次加载好后,发送网络请求,获取数据后setState(data) 触发重新渲染 or 操作DOM改变样式

只会在装载完成之后调用一次,在render之后调用,从这里开始可以通过 ReactDOM.findDOMNode(this)获取到组件的DOM节点。

更新组件触发

1.componentWillReceiveProps(nextProps)  用来props--->state,setState不会重新渲染

有可能props没有改变的时候也触发,比如父组件更新导致的触发,有时候可能需要比较props是否发生了改变

2.shouldComponentUpdate(nextProps, nextState)  判断新的props或者state是否需要重新渲染

更新前所有的setState已经完成,forceUpdate()会强刷

3.componentWillUpdate(nextProps, nextState)  可以执行一些预备操作在更新前, 基本不用

此时已经不能调用setState了,

4.componentDidUpdate()  页面加载好后,发送网络请求,获取数据后setState(data) 触发重新渲染 or操作DOM改变样式

给出一个疑问:

官网说可以再componenDidUpdate 中做一些网络请求,然后setState的事情

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

推荐一篇好的使用react的建议

http://aeflash.com/2015-02/react-tips-and-best-practices.html

React生命周期中应该做什么事的更多相关文章

  1. React 生命周期简介

       React 中组件的生命周期会经历如下三个过程:装载过程.更新过程.卸载过程. 装载过程:组件实例被创建和插入 DOM 树的过程: 更新过程:组件被重新渲染的过程: 卸载过程:组件从 DOM 树 ...

  2. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  3. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  4. React生命周期及事件详解

    引用原文:http://blog.csdn.net/limm33/article/details/50942808 一.组件的详细说明和生命周期ComponentSpecs and Lifecycle ...

  5. react生命周期方法有哪些?

    react生命周期方法有哪些? React 16.3+ getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用.需要使用派生状态的情况是很罕见的 comp ...

  6. 【React学习笔记】React生命周期梳理(16.X前后两种)

    React生命周期 「16版本以前的:」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图: 流程讲解: 初始化流程 start 开始创建组件 在这个周期中做的事情 ...

  7. 4.React生命周期

    4.React生命周期 4.1引出生命周期 class Life extends React.Component { state = { opacity:0.5 } death = () => ...

  8. React生命周期

    在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...

  9. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

随机推荐

  1. KL散度=交叉熵-熵

    熵:可以表示一个事件A的自信息量,也就是A包含多少信息. KL散度:可以用来表示从事件A的角度来看,事件B有多大不同. 交叉熵:可以用来表示从事件A的角度来看,如何描述事件B. 一种信息论的解释是: ...

  2. 分享:手把手教你如何免费且光荣地使用正版IntelliJ IDEA

    https://mp.weixin.qq.com/s/6nRYmn6gAWFLg3mUIN_ojg TIPS 近日在个人技术讨论QQ群里,谈论到IDEA的那些事儿.有童鞋居然在某电商网站花钱买激活码. ...

  3. prototype、__proto__、constructor

    prototype:每个函数都有一个prototype属性,这个属性指向一个对象,这个对象叫原型对象. 作用:节约内存.扩展属性和方法.可以实现类之间的继承 __proto__:每个通过构造函数new ...

  4. 【字符串】【P5830】 【模板】失配树

    [字符串][P5830] [模板]失配树 Description 给定一个长度为 \(n\) 的字符串 \(S\),有 \(m\) 次询问,每次询问给定 \(S\) 的两个前缀,求它们的最长公共 bo ...

  5. HTML5 - websocket的应用 之 简易聊天室

    需要知识点: 前端知识 jq操作dom nodejs socket.io 关于websocket api的知识点,见上篇章<HTML5-Websocket>. 聊天室思路/原理: A和B聊 ...

  6. 第10组 Beta版本演示

    一.小组信息 组长博客链接 组名:凹秃曼 组内成员 学号 组员 031702240 童景霖(组长) 031702225 叶泽林 031702246 陈鸿立 031702201 万本琳 03170222 ...

  7. 【BigData】Java基础_HashSet

    HashSet简介 HashSet是一个集合数据类型,具有以下三个特性: (1)可以存储过个数据对象 (2)HashSet中的数据不能重复 (3)HashSet的数据存储是无序的 HashSet的几个 ...

  8. java 调用腾讯身份OCR接口文档实例(绝对可用)

      1.情景展示 通过读取身份证照片上的信息,实现自动填充功能. 2.原因分析 想要解析照片上所携带的相关信息,就需要识别照片的功能,腾讯提供了免费的身份证OCR接口,可供大家使用. 没有耐心的可以直 ...

  9. MySql查询数据令某字段显示固定值

    我们用SQL查询数据时后,基于某些原因不想看到某字段的值,比如密码,我们可以通过创建视图,忽略某一字段的值. 同时我们也可以直接通过SQL语句来让其显示某个固定值: (1)一般查询语句: SELECT ...

  10. 出现Strict Standards: Only variables should be passed by reference in的解决方法

    出现Strict Standards: Only variables should be passed by reference in的解决方法 代码报错: <br /><b> ...