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查询,即从单个数据库表中检索数据的单条语 ...
随机推荐
- git 入门教程之远程仓库
远程仓库 如果说本地仓库已经足够个人进行版本控制了,那么远程仓库则使多人合作开发成为可能. 如果你只是打算自己使用git,你的工作内容不需要发布给其他人看,那就用不到远程仓库的概念. git 是分布式 ...
- 使用 new XMLHttpRequest() 制作下载文件进度条
mui 进度控件使用方法: 检查当前容器(container控件)自身是否包含.mui-progressbar类: 当前容器包含.mui-progressbar类,则以当前容器为目标控件,直接显示进度 ...
- 【JS基础】类型转换——不同数据类型比较
小试牛刀 输出下列数据比较结果 [] == 0; //==============================================================true [] == ...
- Javascript 高级程序设计--总结【三】
******************** Chapter 8 BOM ******************** BOM由浏览器提供商扩展 window: 既是js访问浏览器窗口的接口,又是Globa ...
- Python常用的数据类型转换
在实际开发中.经常要根据需求来转变一些变量的类型. 需要用到以下函数:
- ASP.NET -- 一般处理程序ashx
ASP.NET -- 一般处理程序ashx 如果在一个html页面向服务器端请求数据,可用ashx作为后台页面处理数据.ashx适合用作数据后台处理,相当于WebForm中的aspx.cs文件或 ...
- JavaScript -- 时光流逝（十）：Screen 对象、History 对象、Location 对象
JavaScript -- 知识点回顾篇(十):Screen 对象.History 对象.Location 对象 1. Screen 对象 1.1 Screen 对象的属性 (1) availHeig ...
- 手动搭建Docker本地私有镜像仓库
实验环境:两个Centos7虚拟机,一个是Server,用作客户端,另一个是Registry,用作Docker私有镜像仓库. 基础配置 查看一下两台虚拟机的IP地址 Server的IP地址是192.1 ...
- LeetCode算法题-Remove Linked List Elements（Java实现）
这是悦乐书的第189次更新,第191篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第48题(顺位题号是203).移除单链表中节点值为val的节点.例如: 输入:1-> ...
- FCM算法的matlab程序（初步）
FCM算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648430.html文章中已经介绍了FCM算法,现在用matlab程序实现它. 作者:凯鲁嘎 ...