这篇新颖的东西是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-菜鸟学习笔记（二）的更多相关文章

  1. React Native 学习笔记--进阶（二）--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  2. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  3. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  4. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  5. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  6. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  7. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  8. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  9. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  10. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

随机推荐

  1. 全参考视频质量评价方法（PSNR，SSIM）以及与MOS转换模型

    转载处:http://blog.csdn.NET/leixiaohua1020/article/details/11694369 最常用的全参考视频质量评价方法有以下2种: PSNR(峰值信噪比):用 ...

  2. (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. centos开发环境安装的备忘

    #Centos        visudo运行普通用户$(whomai)执行sudo操作                http://www.cnblogs.com/xianyunhe/archive ...

  4. Hive分区

    注意:必须在表定义时指定对应的partition字段. 一.指定分区 1.单分区 建表语句:create table day_table(id int, content string) partiti ...

  5. Percona XtraBackup 备份还原篇

    Percona XtraBackup 安装介绍篇已经对Percona XtraBackup的功能和安装做了比较详细的介绍,那么本篇我们直接进入主题,如何使用XtraBackup做备份.还原,下面主要介 ...

  6. CentOS7中安装MySQL5.7

    安装必要的组件 yum install –y autoconf automake imake libxml2-devel expat-devel cmake gcc gcc-c++ libaio li ...

  7. perl语言中的.pm文件和.pl文件区别

    perl...呵呵呵 按照惯例,.pm 应该保存 Perl Module,也就是 Perl 模块.例如 Socket.pm.pl 应该保存 Perl Library,也就是 Perl 库文件.例如 p ...

  8. windows下数据库文件使用脚本同步到linux下的mysql数据库中

    1.背景 windows server 2008 下 每天会有 *.sql数据文件 需要上传到linux 中的mysql数据库中 而运维人员是在 windows server 下使用 xshell 连 ...

  9. 使用epoll实现聊天室功能，同时比较epoll和select的异同

    1.首先介绍一下select和epoll的异同,如下(摘抄自https://www.cnblogs.com/Anker/p/3265058.html) select的几大缺点: (1)每次调用sele ...

  10. Vue学习之路7-v-on指令学习之简单事件绑定

    前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...