学以致用,react学习前奏准备阶段
ReactJS:支持React开发,提供JSX代码提示,高亮显示,ReactJS官方介绍
1、cdm→ componentDidMount: fn() { ... }
![](http://upload-images.jianshu.io/upload_images/2198249-0d4f553a79661ef0.png?imageMogr2/auto-orient/strip|imageView2/2/w/309/format/webp)
2、cdup→ componentDidUpdate: fn(pp, ps) { ... }
![](http://upload-images.jianshu.io/upload_images/2198249-e196c00111551116.png?imageMogr2/auto-orient/strip|imageView2/2/w/470/format/webp)
3、cs→ var cx = React.addons.classSet;
![](http://upload-images.jianshu.io/upload_images/2198249-d95c69b86d21f530.png?imageMogr2/auto-orient/strip|imageView2/2/w/302/format/webp)
4、cwm→ componentWillMount: fn() { ... }
![](http://upload-images.jianshu.io/upload_images/2198249-6c8ac6396dc2f75f.png?imageMogr2/auto-orient/strip|imageView2/2/w/268/format/webp)
5、cwr→ componentWillReceiveProps: fn(np) { ... }
![](http://upload-images.jianshu.io/upload_images/2198249-0d3138b988024222.png?imageMogr2/auto-orient/strip|imageView2/2/w/420/format/webp)
6、cwu→ componentWillUpdate: fn(np, ns) { ... }
![](http://upload-images.jianshu.io/upload_images/2198249-57546bbdeab0004c.png?imageMogr2/auto-orient/strip|imageView2/2/w/426/format/webp)
7、cwun→ componentWillUnmount: fn() { ... }
![](http://upload-images.jianshu.io/upload_images/2198249-603b62e017227112.png?imageMogr2/auto-orient/strip|imageView2/2/w/312/format/webp)
8、cx→ cx({ ... })
![](http://upload-images.jianshu.io/upload_images/2198249-a0b4d57b896b2d04.png?imageMogr2/auto-orient/strip|imageView2/2/w/274/format/webp)
9、fdn→ React.findDOMNode(...)
![](http://upload-images.jianshu.io/upload_images/2198249-6e3f96880f4dc0c0.png?imageMogr2/auto-orient/strip|imageView2/2/w/306/format/webp)
10、fup→ forceUpdate(...)
![](http://upload-images.jianshu.io/upload_images/2198249-5dfb3dfdac8cfa96.png?imageMogr2/auto-orient/strip|imageView2/2/w/204/format/webp)
11、gdp→ getDefaultProps: fn() { return {...} }
![](http://upload-images.jianshu.io/upload_images/2198249-8d24864ccf76893a.png?imageMogr2/auto-orient/strip|imageView2/2/w/249/format/webp)
12、gis→ getInitialState: fn() { return {...} }
![](http://upload-images.jianshu.io/upload_images/2198249-79bb18e37d8b447b.png?imageMogr2/auto-orient/strip|imageView2/2/w/299/format/webp)
13、ism→ isMounted()
![](http://upload-images.jianshu.io/upload_images/2198249-f29d3568c7710b15.png?imageMogr2/auto-orient/strip|imageView2/2/w/195/format/webp)
14、props→ this.props.
![](http://upload-images.jianshu.io/upload_images/2198249-3b129b958f3182e0.png?imageMogr2/auto-orient/strip|imageView2/2/w/147/format/webp)
15、pt→ propTypes { ... }
![](http://upload-images.jianshu.io/upload_images/2198249-a26aca155bce98bf.png?imageMogr2/auto-orient/strip|imageView2/2/w/239/format/webp)
16、rcc→ component skeleton
![](http://upload-images.jianshu.io/upload_images/2198249-e254eb30ff5cb6c0.png?imageMogr2/auto-orient/strip|imageView2/2/w/343/format/webp)
17、refs→ this.refs.
![](http://upload-images.jianshu.io/upload_images/2198249-50d209426a541474.png?imageMogr2/auto-orient/strip|imageView2/2/w/197/format/webp)
18、ren→ render: fn() { return ... }
![](http://upload-images.jianshu.io/upload_images/2198249-f237175afdce156a.png?imageMogr2/auto-orient/strip|imageView2/2/w/299/format/webp)
19、scu→ shouldComponentUpdate: fn(np, ns) { ... }
![](http://upload-images.jianshu.io/upload_images/2198249-67d85da04be0c764.png?imageMogr2/auto-orient/strip|imageView2/2/w/429/format/webp)
20、sst→ this.setState({ ... })
![](http://upload-images.jianshu.io/upload_images/2198249-dc9e55615ba49c0d.png?imageMogr2/auto-orient/strip|imageView2/2/w/295/format/webp)
21、state→ this.state.
![](http://upload-images.jianshu.io/upload_images/2198249-c69804418f54c8fb.png?imageMogr2/auto-orient/strip|imageView2/2/w/233/format/webp)
作者:Loki_
链接:https://www.jianshu.com/p/45ac37cc0e34
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
学以致用,react学习前奏准备阶段的更多相关文章
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React 学习笔记(1) 基础语法和生命周期
参看:视频地址 简单搭建一个react-cli: 2. React.createElement() 将object转化为 React语法 import React from 'react' impor ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
- Java程序猿学习当中各个阶段的建议
回答阿里社招面试如何准备,顺便谈谈对于Java程序猿学习当中各个阶段的建议 引言 其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
随机推荐
- mac常用快捷键,Mac文件重命名快捷键,Mac OS快速访问系统根目录, MacOS 10.11重要数据的存储位置大全
command+r,相当于F5,刷新页面 command+F5,启动voiceover command+q 关闭当前程序 在Finder中command+/ 打开底部状态栏,可以查看剩余磁盘空间大小 ...
- C#的选择语句练习(一)
1.请输入一个数x,若x<1,则y=x:若1<=x<10,则y=2x-1:若x>=10,则y=3x-11,要求随意输入一个x值,求出y值. 2.输入问题[你有房子吗?],若回答 ...
- 2018-8-10-WPF-好看的矢量图标
title author date CreateTime categories WPF 好看的矢量图标 lindexi 2018-08-10 19:16:53 +0800 2018-5-16 11:4 ...
- React MVC框架 <某某后台商品管理开源项目> 完成项目总结
**百货后台商品信息开源项目 1.利用React app脚手架 2.封装打包 buid 3.更偏向于后台程序员开发思维 4.利用的 react -redux react-router-dom ...
- centos7 安装R和RstudioServer版
参考: http://www.cnblogs.com/inspursu/p/4275701.html http://blog.csdn.net/u010022051/article/details/5 ...
- Jmeter完整Demo
1:创建一个线程组 2:添加一个cookie管理器 3:设置你的信息头管理器:application/json;text/plain;charset=UTF-8 44 4:添加一个用户参数,做全局变量 ...
- 关于对height:100%的研究
参考此链接: https://segmentfault.com/a/1190000012707337
- es6笔记 day3---Promise
作用:解决异步回调问题 先知道它的大概语法就好了,这个东西需要平时用到才知道它的用处 语法: let promise= new Promise(function(resolve,reject){ // ...
- Delta Lake基础操作和原理
目录 Delta Lake 特性 maven依赖 使用aws s3文件系统快速启动 基础表操作 merge操作 delta lake更改现有数据的具体过程 delta表schema 事务日志 delt ...
- 由“Sysnative”引发的思考
在64位的Windows系统中,有个非常神秘的文件夹“Sysnative”,你无法通过Explorer去访问它,甚至你都无法找到它,但它却扮演了一个非常重要的角色.下面我们就来聊聊它. 32位和64位 ...