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查询,即从单个数据库表中检索数据的单条语 ...
随机推荐
- 腾讯云 Game-Tech 技术沙龙小游戏专场“空降”长沙
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 小游戏作为今年快速成长的新生态,在开放进入市场之后持续成为行业热点,获得了游戏开发商的高度关注与参与.在 ...
- recovery 下界面UI旋转90 180 270修改
原文修改出自简书:https://www.jianshu.com/p/768fdd954061 应该是MTK修改的google源码,支持recovery下屏幕旋转90/180/270, 作者把MTK的 ...
- javascript:面向对象和常见内置对象及操作
本文内容: 面向对象 常见内置对象及操作 首发日期:2018-05-11 面向对象: JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型. 对象是 ...
- coTurn 运行在Windows平台的方法及服务与客户端运行交互流程和原理
coTurn是一个开源的STUN和TURN及ICE服务项目,只是不支持Windows.为了在window平台上使用coTurn源码,需要在windows平台下安装Cygwin环境,并编译coTurn源 ...
- spring4笔记----报错publicid systemid之间要有空格的解决方法
<?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www. ...
- Elasticsearch拼音和ik分词器的结合应用
一.创建索引时,自定义拼音分词和ik分词 PUT /my_index { "index": { "analysis": { "analyzer&quo ...
- git-------基础知识（本地推送项目版本---github上）
创建Git仓库 一:初始化版本库:-git init 二:添加文件到缓存区:-git add --添加所有文件 是:加个点-列:git add . 三:查看仓库状态:-git status 四:添加 ...
- shell的case用法
今天给大家简单介绍一下结构条件语句的用法,实际上就是规范的多分支if语句,如下: case语法: case "字符串变量" in 值1)指令1... ;; 值2)指令2... ;; ...
- Python爬虫之Urllib库的基本使用
# get请求 import urllib.request response = urllib.request.urlopen("http://www.baidu.com") pr ...
- GitHub-分支管理01
参考博文:廖雪峰Git教程 1. 分支说明 分支在实际中有什么用呢?假设你准备开发一个新功能,但是需要两周才能完成,第一周你写了50%的代码,如果立刻提交,由于代码还没写完,不完整的代码库会导致别人不 ...