React---钩子函数
钩子函数的状态有4个阶段:
<p>1.初始化阶段 (componentWillMount() || componentDidMount()) </p>
<p>2.更新阶段 (componentWillUpdate() || componentDidUpdate())</p>
<p>3.卸载阶段 (componentWillUnmount())</p>
<p>4.异常处理阶段 (componentWillCatch()) </p>
“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听。
React 组件生命周期:
componentWillMount :在渲染前调用,在客户端也在服务端。
componentDidMount:在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。
componentWillReceiveProps:在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate:返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用,可以在你确认不需要更新组件时使用。
componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate:在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。
React---钩子函数的更多相关文章
- 【学而思】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性
凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...
- 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性
凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...
- react生命周期钩子函数
render在更新阶段和挂在阶段都会执行 class App extends Component { render() { return ( <div> <h1>reacet生 ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- vue - 过滤器-钩子函数路由
一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...
- vue-(过滤器,钩子函数,路由)
1.局部过滤器 在当前组件内部使用过滤器,修饰一些数据 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } // ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- Vue2.X的路由管理记录之 钩子函数(切割流水线)
$route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...
- 【Mocha.js 101】钩子函数
前情提要 在上一篇文章<[Mocha.js 101]同步.异步与 Promise>中,我们学会了如何对同步方法.异步回调方法以及 Promise 进行测试. 在本篇文章中,我们将了解到 M ...
- wordpress钩子和钩子函数
ccc,看了很多博客,无法理解,还是自己来写吧. wordpress 在wordpress中有很多钩子,还有很多钩子函数,在什么地方用什么钩子,用什么钩子函数, 需要明白两个问题: 1:什么是钩子,钩 ...
随机推荐
- Python 运算符括号
- Leetcode892.Surface Area of 3D Shapes三维形体的表面积
在 N * N 的网格上,我们放置一些 1 * 1 * 1 的立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上. 返回结果形体的总表面积. 示例 1: ...
- 记一次goland的包导入问题
昨天把go的GOPATH环境变量设置成了“/home/mi/app/gopath”,今天用goland新建的项目在/home/mi/go/src目录下,名字是studygolang,如下图. 结果导入 ...
- JavaScript--放大镜
上例图: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- 【JZOJ4743】【NOIP2016提高A组模拟9.2】积木
题目描述 输入 输出 样例输入 3 8 7 6 3 9 4 1 10 5 输出 18 数据范围 样例解释 解法 容易从n<=15得出可以使用状态压缩动态规划. 设f[i][j][k]表示01状态 ...
- Spark day02
Standalone模式两种提交任务方式 Standalone-client提交任务方式 提交命令 ./spark-submit --master spark://node1:7077 --class ...
- js多图上传展示和删除
html部分 <button class="btn btn-info" for="file">请选择文件</button> <in ...
- docker push dial tcp *.*.*.*:443 getsockopt: connection refused
docker 在提交镜像的时候出现以下错误. 我用的是本地的仓库,所以tcp后面是我的ip地址. 错误信息: #docker push ubuntu docker push dial tcp 192 ...
- 每天一个linux命令(2): nl命令
0.学习时间 2014-05-16 1.命令格式 nl [参数] 文件名 (文件名也缺省的情况下, 从标准输入中读入) 2.命令参数 -b t 空行不加行号(默认) -b a 空行也加行号(类似于c ...
- 2019.9.10附加题while练习
题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万之 ...