react入门(下)
react生命周期
1. 组件的三个生命周期状态:
* Mount:插入真实 DOM
* Update:被重新渲染
* Unmount:被移出真实 DOM
2. React 为每个状态都提供了两种勾子(hook)函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用
* componentWillMount()
* componentDidMount() : 已插入真实DOM, 在render之后才会执行
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()
3. 生命周期流程:
1). 第一次初始化渲染显示: render()
* constructor(): 创建对象初始化state
constructor参数接受两个参数props,context
只要组件存在constructor,就必要要写super
* componentWillMount() : 将要插入回调
组件刚经历constructor,初始完数据
组件还未进入render,组件还未渲染完成,dom还未渲染
* render() : 用于插入虚拟DOM回调
render函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,在每一次组件更新时,在此react会通过其diff算法比较更新前后的新旧DOM树,比较以后,找到最小的有差异的DOM节点,并重新渲染
* componentDidMount() : 已经插入回调
2). 每次更新state: this.setSate()
* componentWillUpdate() : 将要更新回调
* render() : 更新(重新渲染)
* componentDidUpdate() : 已经更新回调
3). 删除组件
* ReactDOM.unmountComponentAtNode(document.getElementById('example')) : 移除组件
* componentWillUnmount() : 组件将要被移除回调
4.注意:
* 一般会在componentDidMount()中: 开启监听, 发送ajax请求
* 可以在componentWillUnmount()做一些收尾工作: 停止监听组件,将要卸载时调用,一些事件监听和定时器需要在此时清除。
* componentWillReceiveProps
componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多
react入门(下)的更多相关文章
- react入门(3)
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门资源整理
另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...
- react入门——慕课网笔记
一. jsx 1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性 类似的还有(coffeescript,typescr ...
- react 入门教程 阮一峰老师真的是榜样
- 转自阮一峰老师博客 React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...
- react入门之使用webpack搭配环境(一)
react入门之搭配环境(一) 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app ...
- react入门之使用react-bootstrap当轮子造车(二)
react入门之使用react-bootstrap当轮子造车(二) 上一篇我们谈了谈如何配置react的webpack环境 react入门之搭配环境(一) 可能很多人已经打开过官方文档学习了react ...
- React入门实例教程
文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...
随机推荐
- 关于spring MVC中获取客户端的IP地址
1. 引入HttpServletRequest @Autowired private HttpServletRequest request; 2. 获取IP地址 private static Stri ...
- Linux 常用命令四 rmdir rm
一.rmdir命令 用于删除空目录: wang@wang:~/workpalce/python$ tree . ├── .txt ├── .txt ├── .txt ├── A │ └── B │ ...
- bzoj 5195: [Usaco2018 Feb]Directory Traversal【树形dp】
注意到目录是一颗树结构,然后就简单了,预以1为根的处理出dis[u]为以这个点为根,到子树内的目录总长,si为子树内叶子数 第二遍dfs换根即可 #include<iostream> #i ...
- 一个 Java 对象到底有多大?
阅读本文大概需要 2.8 分钟. 出处:http://u6.gg/swLPg 编写 Java 代码的时候,大多数情况下,我们很少关注一个 Java 对象究竟有多大(占据多少内存),更多的是关注业务与逻 ...
- QB学堂济南游记
七天很快就过去了,今天的测试意味着集训也将结束.回首七天来,与许多dalao同处一室,见识到了各种厉害的老师.厉害的算法.厉害的数据结构. 前两天jzh与yl老师讲课的时候还是全程在线,然而讲到数据结 ...
- 搜索刷题记录by cellur925
我好菜啊!连暴搜都不会! 注意边界退出! 特开此帖,记录搜索学习之路!(逃) 1.全排列 2.八皇后 3.数的划分 由于此题有同一划分方法算一个的限制,我们为了避免搜多,可以使搜出的结果满足单调不降性 ...
- match email address
[A-Za-z0-9\._+]+@[A-Za-z]+\.(com|org|edu|net)
- git 标签
如果你达到一个重要的阶段,并希望永远记住那个特别的提交快照,你可以使用 git tag 给它打上标签. 比如说,我们想为我们的 runoob 项目发布一个"1.0"版本. 我们可以 ...
- 题解报告:hdu 1060 Leftmost Digit
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1060 问题描述 给定一个正整数N,你应该输出N ^ N的最左边的数字. 输入 输入包含多个测试用例. ...
- Java标识符的习惯命名规范
1 常量标识符:全部用大写字母和下划线表示.如SALES_MAX 2 类名或接口名:标识符用大写字母开头.如CreditCard 3 变量名和方法名:以小写字母开头,单词之间不要有分隔符,第二 及后面 ...