react学习笔记1之声明组件的两种方式
//定义组件有两种方式,函数和类 function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
} class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>;
}
} ReactDOM.render(
<Welcome name="kevin"/>,
document.getElementById('root')
); //函数和类都可以定义组件,组件的props是只读的,不管你的组件是通过函数还是类声明的;用类声明组件的最大好处是可以设置组件的状态,通过更新组件的状态从而达到更新组件UI的目的。而函数声明的组件则没有这个功能。
class Welcome extends React.Component{
constructor(props){
super(props);
this.state = {date:new Date()}
}
componentDidMount(){
setInterval(()=>this.tick(),1000)
}
tick(){
this.setState({date:new Date()})
}
render(){
return (
<h1>
Hello, {this.props.name}
<span>now:{this.state.date.toLocaleTimeString()}
</span>
</h1>
)
}
} ReactDOM.render(
<Welcome name="kevin "/>,
document.getElementById('example')
);
react学习笔记1之声明组件的两种方式的更多相关文章
- angular学习笔记(三)-视图绑定数据的两种方式
绑定数据有两种方式: <!DOCTYPE html> <html ng-app> <head> <title>2.2显示文本</title> ...
- 使用react定义组件的两种方式
react组件的两种方式:函数定义,类定义 在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位 组件要求: 1,为了和react元素进行区分,组件名字首必须 ...
- Android自动化学习笔记:编写MonkeyRunner脚本的几种方式
---------------------------------------------------------------------------------------------------- ...
- React 中的 定义组件的 两种方式
React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...
- MySQL学习笔记(2) - 修改MySQL提示符的两种方法
学习于慕课网 http://www.imooc.com/video/1806 1.方法一: cmd中处于未登录状态时,输入 mysql -uroot -p自己的密码 --prompt 新的提示符 示例 ...
- Qt学习笔记----信号与槽实现的四种方式
1.以按钮为例,首先添加一个按钮,对象名为pushButton,在按钮是右键单击选择“转到槽”即可,在转到槽选择面板(右图)里面选择需要进行的操作,比如单击clicked() 2.选择菜单“编辑”,找 ...
- 十四、Android学习笔记_Android回调函数触发的几种方式 广播 静态对象
一.通过广播方式: 1.比如登录.假如下面这个方法是外界调用的,那么怎样在LoginActivity里面执行登录操作,成功之后在回调listener接口呢?如果是平常的类,可以通过构造函数将监听类对象 ...
- Android(java)学习笔记147:textView 添加超链接(两种实现方式,,区别于WebView)
1.方式1: LinearLayout layout = new LinearLayout(this); LinearLayout.LayoutParams params = new LinearLa ...
- Android(java)学习笔记191:Android数据存储5种方式总结
1.使用文件(File)存储 存储一般的数据 2.使用sharedperference(xml) 存储设置信息.配置信息.密码 3.数据库Sqlite 开源的,嵌入式的数据库,轻量级 4.使用Cont ...
随机推荐
- turbo boost - 睿频加速
turbo boost就是英特尔睿频加速技术 英特尔睿频加速技术是英特尔酷睿 i7/i5 处理器的独有特性,也是英特尔新宣布的一项技术.这项技术可以理解为自动超频.当开启睿频加速之后,CPU会根据当前 ...
- Python - 经典程序示例
列表排序 def que6(): # 6.输入三个整数x, y, z,形成一个列表,请把这n个数由小到大输出. # 程序分析:列表有sort方法,所以把他们组成列表即可. li = np.random ...
- codeforces-1111
https://www.cnblogs.com/31415926535x/p/10397007.html codeforces 537 div2 A 题意就是给你两个字符串,然后如果s,t的对应位上的 ...
- Windows环境下 PHP调用R脚本
写在前面的: 由于是windows平台实现的,只要保证脚本命令能在cmd控制台运行,则可以在php中利用system()实现. 注意事项: (1).保证system的路径中无汉字和空格 !! (亲身 ...
- BZOJ.4553.[HEOI2016&TJOI2016]序列(DP 树状数组套线段树/二维线段树(MLE) 动态开点)
题目链接:BZOJ 洛谷 \(O(n^2)\)DP很好写,对于当前的i从之前满足条件的j中选一个最大值,\(dp[i]=d[j]+1\) for(int j=1; j<i; ++j) if(a[ ...
- [NOIp2012提高组]同余方程
OJ题号: 洛谷1082 思路: 逆元模板. #include<cstdio> #include<cctype> inline int getint() { char ch; ...
- 搞IT,算法编程不错的学习网址 & 一些专栏博客大神的地址(汇总)
博客专栏大神 王晓华(算法的乐趣) 算法系列:http://blog.csdn.net/orbit/article/category/830251 PostgreSQL深入理解内核系列:http:// ...
- VC6配置CXimage库
VC6下配置CxImage库教程 第一步 下载CxImage http://sourceforge.net/projects/cximage/下载相应的CxImage文件 本例使用的最新版本(7.02 ...
- Android MediaPlayer架构 -- 前言小知识点(二)
本文系作者自己学习之所用,文章内容仅出自作者拙劣之思考,问题之处烦请不吝指教. 在frameworks\av\media\libmedia\mediaplayer.cpp中会有语句:const sp& ...
- Qt 4.6.2静态编译
一.下载mingw 4.4.0:ftp://ftp.trolltech.com/misc/MinGW-gcc440_1.zip 二.解压到C:\mingw目录下,设置环境变量path将C:\mingw ...