React-菜鸟学习笔记（二）
这篇新颖的东西是React的组件的封装和引用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<script type="text/babel"> /*jsx允许在模板中插入数组，数组会自动展开所有成员*/
/**
var arr = [
<h1>白</h1>,
<h1>富</h1>,
<h1>美</h1>,
<h1>甜</h1>
];
var element = ( <div>
<h1>Hello, world! </h1>
{arr}
</div> ) ReactDOM.render(
element,
document.getElementById('example')
);
*/ /* React组件 封装一个输出为‘hello world’的React组件，组件名为HelloMessage*/
/*Tips: 原生HTML元素名以小写字母开头，而自定义的React类名以大写字母开头。组建类只能包含一个顶层标签 return <div><h1>hello world</h1><div/> 是错的*/
/*方法1 使用函数定义一个组件 方法2 使用ES6 class定义一个组件*/ /**
function HelloMessage(props){
return <h1>hello world: {props.name}</h1>
} class Welcome extends React.Component{
render(){
return <h1>welcome slowcity</h1>;
} } const element = <div>
<HelloMessage name='superMan'/>
<Welcome />
</div> ReactDOM.render(
element,
document.getElementById('example')
); */
/*复合组件 直白点就是封装组件*/
/**
function Name(props) {
return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
return (
<div>
<Name name="造梦工场" />
<Url url="https://www.cnblogs.com/" />
<Nickname nickname="Slowcity" />
</div>
);
} const element =( <App />)
ReactDOM.render(
element,
document.getElementById('example')
); */
/*将生命周期方法添加到类中 挂载和卸载*/ /*
Tips:
()=>this.tick() 是 ES6 中声明函数的一种方式，叫做箭头函数表达式，引入箭头函数有两个方面的作用：更简短的函数并且不绑定 this。 var f = ([参数]) => 表达式（单一）
// 等价于以下写法
var f = function([参数]){
return 表达式;
}
箭头函数的基本语法：
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; } // 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明} // 没有参数的函数应该写成一对圆括号。
() => {函数声明} */ class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
//添加定时器 生命周期钩子 当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子
componentDidMount(){
this.timerID = setInterval(
() => this.tick(),1000
);
}
//移除定时器 一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数
componentWillUnmount(){
clearInterval(this.timerID);
} tick(){
this.setState({
date:new Date()
}); } render() {
return (
<div>
<h1>Hello, world!</h1>
<FormattedDate date={this.state.date}/>
<h2>hello{this.props.name} 现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} Clock.defaultProps={
name:"慢城"
}
function FormattedDate(props) {
return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
} ReactDOM.render(
<Clock />,
document.getElementById('example')
); </script> </body>
</html>
React-菜鸟学习笔记（二）的更多相关文章
- React Native 学习笔记--进阶（二）--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
随机推荐
- (网页)websocket例子
转载自博客园张果package action; import javax.websocket.CloseReason; import javax.websocket.OnClose; import j ...
- mac下编译node源码
看过一篇win7 64x下面编译node的文章,链接地址:编译nodejs及其源码研究 下面学习一下在mac下面如何编译node源码. 过程也挺简单. 1.下载源码. > mkdir nodes ...
- 如何在 Flickr 上找到又酷，又有趣，且版权自由的照片？
[编者按]本文作者为 Alex Walker,主要介绍在 Flickr 上进行照片搜索时的一些技巧.本文系国内 ITOM 管理平台 OneAPM 编译呈现. 我们一直都在寻找新奇的,与众不同的设计.图 ...
- Visual Studio Team Services 动手实验
Visual Studio Team Services 动手实验 概述 为Visual Studio Team Services提供的动手实验,要完成实验首先需要满足以下条件: Visual Stud ...
- openstack nova工作流程
工作流程请求:nova boot --image ttylinux --flavor 1 i-01nova-api 接受请求,一个tcp REST请求.nova-api 发送一个创建虚拟机的请求到消息 ...
- java----JSTL学习笔记（转）
Java容器类包含List.ArrayList.Vector及map.HashTable.HashMap.Hashset ArrayList和HashMap是异步的,Vector和HashTable是 ...
- Hibernate 5 入门指南-基于映射文件
由于Hibernate 4版本混乱,Hibernate 3有些过时,Hibernate 5的开发文档尚不完善,所以构建一份简单的Hibernate 5的入门指南 注:案例参考Hibernate 官方参 ...
- php配置文件php.ini的详细解析(续)
file_uploads = On // ...
- ASP.NET -- WebForm -- Cookie的使用
ASP.NET -- WebForm -- Cookie的使用 Cookie是存在浏览器内存或磁盘上. 1. Test3.aspx文件 <%@ Page Language="C#&q ...
- 使用epoll实现聊天室功能，同时比较epoll和select的异同
1.首先介绍一下select和epoll的异同,如下(摘抄自https://www.cnblogs.com/Anker/p/3265058.html) select的几大缺点: (1)每次调用sele ...