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查询,即从单个数据库表中检索数据的单条语 ...
随机推荐
- 洗礼灵魂，修炼python（84）-- 知识拾遗篇 —— 网络编程之socket
学习本篇文章的前提,你需要了解网络技术基础,请参阅我的另一个分类的博文:网络互联技术(4)——计算机网络常识.原理剖析 网络通信要素 1.IP地址: 用来标识网络上一台独立的终端(PC或者主机) ip ...
- selenium驱动程序下载和使用流程
转自https://blog.csdn.net/weixin_42660771/article/details/81286982 1.下载地址 https://github.com/mozill ...
- c/c++ lambda 表达式 介绍
lambda 表达式 介绍 问题:假设有个需求是,在vector<string>找出所有长度大于等于4的元素.标准库find_if函数的第三参数是函数指针,但是这个函数指针指向的函数只能接 ...
- AI学习---数据IO操作&神经网络基础
数据IO操作 TF支持3种文件读取: 1.直接把数据保存到变量中 2.占位符配合feed_dict使用 3. QueueRunner(TF中特有的) 文件读取流程 文件读取流程(多线 ...
- PostgreSQL远程访问设置
数据库版本:9.3.23(Windows xp系统) 步骤: 1.需要修改数据库安装目录下的pg_hba.conf文件 修改成: 2.并使用psql执行pg_ctl reload重新加载配置文件
- RPM包的版本号比较
版本号表示格式为 epoch:version-release,例如 1:2-3 第一条原则是 rpm 属性优先级 epoch > version > release 两个 r ...
- LeetCode算法题-Third Maximum Number（Java实现-四种解法）
这是悦乐书的第222次更新,第235篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第89题(顺位题号是414).给定非空的整数数组,返回此数组中的第三个最大数字.如果不存 ...
- LeetCode算法题-Min Stack（Java实现）
这是悦乐书的第177次更新,第179篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第36题(顺位题号是155).设计一个支持push,pop,top和在恒定时间内检索最小 ...
- Object类（根类）
Object中的方法是所有类都有的方法,每个类默认继承了Object类. boolean equals(Object obj) : Object中默认是比较地址,可以重写equals(Object ...
- 英语进阶系列-A01-再别康桥
每天必读知识 音标 发音网页 人称代词与物主代词 时态 朗读50遍词汇系列1 Number word 1 be 2 have 3 get 4 give 5 take 诗歌欣赏 [原诗] [英文版] 再 ...