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. centos下的python无法打印中文

    Python3中输出中文的方法如下: 方法一:在环境变量中,设置PYTHONIOENCODING=utf-8 以centos为例执行: export PYTHONIOENCODING=utf-8 方法 ...

  2. Nacos 学习资料

    资料 网址 官方网站 https://nacos.io/zh-cn/docs/what-is-nacos.html github https://github.com/alibaba/nacos 程序 ...

  3. nginx docker 命令: command not found

    1. ps: command not found 使用如下命令安装 apt-get update && apt-get -y install procps 2. vim: comman ...

  4. nginx proxy_pass 指令

    nginx proxy_pass 指令 文档 Nginx 官方文档 https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pa ...

  5. 平台级 SAAS 架构的基础:统一身份管理系统

    https://my.oschina.net/bochs/blog/2248954 业内在用户统一身份认证及授权管理领域,主要关注 4 个方面:集中账号管理(Account).集中认证管理(Authe ...

  6. jenkins pipeline之stash/unstash

    在使用jenkins时,经常会问到文件怎么存储? 正好jenkins有一个stash的功能,下面简单介绍下: 先看看官方是怎么解释的: stash: Stash some files to be us ...

  7. maven jar包冲突的发现与解决[工具篇]

    本文是我的第177篇文章. 关于jar冲突排查解决的问题,相信很多小伙伴也都知道有一些,无非就是两类:命令 or 工具. 命令方式比如: mvn dependency:tree 工具方式比如: Mav ...

  8. Candy Treasure Box

    This is an interesting puzzle game. In the game, you need to use your brain, think carefully, operat ...

  9. Codeforces Round #603 (Div. 2) E - Editor(线段树,括号序列)

  10. 10-排序6 Sort with Swap(0, i) (25 分)

    Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order ...