React的getDefaultProps和getInitialState
getDefaultProps 不是获取默认props,而是设置默认props,主要用在ES5的React写法中
getInitialState 不是获取默认State,而是设置初始的state,主要是用在ES5的React写法中
下面是ES5和ES6的写法对比
//ES5写法
var Video = React.createClass({
getDefaultProps: function(){
return {
autoPlay: false,
maxLoops: 10
}
},
getInitialState: function(){
return {
loopsRemaining: this.props.maxLoops
}
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired
}
}) //ES6写法
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10
}
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired
}
//构造函数写法
constructor(props){
this.state = {
...
}
}
//非构造函数写法
state = {
loopsRemaining: this.props.maxLoops
}
} //组件外部写法
Video.defaultProps = {
autoPlay: false,
maxLoops: 10
}
React的getDefaultProps和getInitialState的更多相关文章
- ReactJS入门(二)—— 组件的生命周期
如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- React学习笔记。
有段时间没写博客了,最近这段时间有点说不出的苦,虽然说年轻的时候该多出去经历些事,但每次找工作东跑西跑,坐公交坐地铁浪费了我太多时间,我感觉到这是一种浪费,对生命的浪费.所以很想尽快找到一份工作,去努 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- 前端React开发入门笔记
什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...
- React学习笔记-5-初始化阶段介绍
初始化阶段可以使用的函数:getDefaultProps:只调用一次,实例之间共享引用.只有在组件的第一个实例被初始化的时候,才会调用他,然后react会把这个函数的返回结果保存起来,从第二个实例开始 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React,React Native中的es5和es6写法对照
es6用在React中的写法总结: 在es6还没有完全支持到浏览器的阶段里,已经有很多技术人员开始用es6的写法来超前编程了,因为有转义es6语法的工具帮助下,大家才可大量使用.解析看看es6写法用在 ...
随机推荐
- 「专题训练」Hard problem(Codeforces Round #367 Div. 2 C)
题意与分析 题意:给出\(n\)个字符串,可以反转任意串,反转每个串都有其对应的花费\(c_i\).经过操作后是否能满足字符串\(\forall i \in [1,n] \text{且} i \in ...
- 使用InstallShield-Limited-Edition制作安装包
1.打开此网站,进行注册,获取序列码以及下载InstallShield-Limited-Edition 2.安装完成之后,打开VisualStudio,新建项目 3.填写基本应用信息 4.配置相关信息 ...
- HTML+JS = 网站注册界面源代码
本注册页面未设置编码方式和兼容性,已测试,在Chrome浏览器显示正常 <!DOCTYPE html> <html> <head> <title>注册页 ...
- ES6 之 let / const
本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中的 let 与 const. 历史遗留问题 由于 JS ES3语法中的 var 提升变量.没有块级作用域,因而 ...
- 贪心算法——Huffman 压缩编码的实现
1. 如何理解 "贪心算法" 假设我们有一个可以容纳 100 Kg 物品的背包,可以装各种物品.我们有以下 5 种豆子,每种豆子的总量和总价值都各不相同.怎样装才能让背包里豆子的总 ...
- LeetCode - 389. Find the Difference - 三种不同解法 - ( C++ ) - 解题报告
1.题目大意 Given two strings s and t which consist of only lowercase letters. String t is generated by r ...
- SpringBoot项目打包成jar后,启动脚本
将springboot项目打包成jar后,上传至服务器,每次都需要手敲命令,重新部署项目,可将这些命令写入脚本中,直接运行. 启动脚本(start.sh): CUR_PATH=$(cd "$ ...
- POJ 1639 Picnic Planning(最小度限制生成树)
Description The Contortion Brothers are a famous set of circus clowns, known worldwide for their inc ...
- wpa_supplicant上行接口浅析
摘自http://blog.csdn.net/fxfzz/article/details/6176414 wpa_supplicant提供的接口 从通信层次上划分, 上行接口:wpa_supplica ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...