React 官网列子学习

一个有状态的组件

除了接受输入数据(通过 this.props ),组件还可以保持内部状态数据(通过this.state )。当一个组件的状态数据的变化,展现的标记将被重新调用render() 更新。

先看结构,下面是hook函数

hook函数:<br>
最早是指windows 系统下提供的一种用来替换DOS 系统下的中断的系统机制;<br>
现在则是泛指,在对特定的系统事件进行hook 后,一旦发生已hook 事件,对该事件进行hook 的程序,就会收到系统的通知。这是程序就可以对该事件第一时间做出响应。

//Mounting 表示 React Components 被render 解析生成对应的DOM 节点并被插入浏览器的DOM 节点并被插入浏览器的DOM 结构的一个过程
//执行顺序看上图

var Timer = React.createClass({
//初始化state
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
  //调用setState为secondsElapsed重新赋值,调用后会重新render
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  //react Components生命周期在render后调用
  componentDidMount: function() {  //定时器更新
    this.interval = setInterval(this.tick, 1000);
  },
  //react Components生命周期在控件销毁时调用
  componentWillUnmount: function() {    //清除当前定时器
    clearInterval(this.interval);
  },
  render: function() {
    return (
    //输出当前secondsElapsed值
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});
//mountNode,绑定到指定id上,一般这么写document.getElementById(‘app‘)
React.render(<Timer />, mountNode);
时间: 2024-11-10 08:29:21

React 官网列子学习的相关文章

Asp.Net Web API 2 官网菜鸟学习系列导航[持续更新中]

前言 本来一直参见于微软官网进行学习的, 官网网址http://www.asp.net/web-api.出于自己想锻炼一下学习阅读英文文章的目的,又可以学习下微软新发布的技术,其实也很久了,但自己菜鸟一枚,对自己来说都是新技术了.鉴于以上两个原因,本人打算借助google翻译和有道词典,来翻译学习这个系列,并通过博客园来记录自己的翻译学习过程.由于自己阅读水平的确太菜,在借助工具的情况下,有时候搞出来的也是蹩脚的语句,自己读着都难受,尤其是到了Web API路由的那两篇,所以自己想着是不是有别人

React官方文档学习记录(四)- 条件渲染

一点点记录,建议需要学习React的移步官方文档去学习. 在React中,你可以创建一个清晰(distinct)的组件来简要描述你现在需要的东西.然后,你只需要使用你应用中的state来渲染它们. React中的条件型渲染跟JavaScript中的条件运算符运行方式差不多.好像就是使用JavaScript中的if或者三元运算符创建元素来显示现在的状态,然后让React更新UI来匹配这些修改. 下面这个例子就是根据不同的isLoggedIn进行不同的欢迎. 1 2 3 4 5 6 7 8 9 10

React官网学习笔记

欢迎指导与讨论 : ) 前言 本文主要是笔者在React英文官网学习时整理的笔记.由于笔者水平有限,如有错误恳请指出 O(∩_∩)O 一 .Tutoial 篇 1 . React的组件类名的首字母必须是大写  var Comment = React.creatClass({..})  class Comment extends Component(){...} 2 . 我们需要往一个对象里传入一些方法,并把这个对象以参数的形式传到React.creatClass( )里.其中最重要的方法是ren

翻译React官网文档—— 入门创建一个Hello World

React的初衷是一个用于构建View层(界面)的javascript类库.后来规模越来越多又有了ReactNative. 不赘述如何搭建react了,由于是学习我们直接用CodePen(可能需要FQ,可以自行下载免费的Lantern),Codepen中我们可以自由的修改代码 通常学习任何语言都要写一个Hello World.Tack is cheep 直接上代码 Go! ReactDOM.render( <h1>Hello, world!</h1>, document.getEl

ORACLE官网JAVA学习文档

Trails Covering the Basics 1 Getting Started 1.1 The Java Technology Phenomenon 1.1.1 About the Java Technology The Java Programming Language ?? Figure 1 an overview of the software development process java文件以.java作为后缀 源文件被javac compiler编译为.class 文件

史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views 编辑推荐:稀土掘金 是一个高质量的技术社区,从 React Native 到 RxJava,性能优化到优秀开源库,让你不错过移动开发的每一个技术干货.各大应用市场搜索「掘金」,技术干货尽在掌握中. 说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X

React 系列教程 1:实现 Animate.css 官网效果

前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就是添加类与删除类的操作.这对于学习 React 来说是一个非常简易的例子,但是我并不会在教程中介绍相关的前置知识,比如 JSX.ES6 等,对于小白来说可能还会有一些困惑的地方,所以还要了解一下 React 相关的基础知识.虽然 React 有很多值得深究的知识,但这个系列教程并不会涉及高大深的内容

【Spark深入学习 -16】官网学习SparkSQL

----本节内容-------1.概览        1.1 Spark SQL        1.2 DatSets和DataFrame2.动手干活        2.1 契入点:SparkSession        2.2 创建DataFrames        2.3 非强类型结果集操作        2.4 程序化执行SQL查询        2.5 全局临时视图        2.6 创建DataSets        2.7 与RDD交互操作        2.8 聚集函数3.Sp

Spring3.0官网文档学习笔记(五)--3.3

3.3 概述 Table 3.1. The bean definition Property Explained in... class Section 3.3.2, "Instantiating beans" name Section 3.3.1, "Naming beans" scope Section 3.5, "Bean scopes" constructor arguments Section 3.4.1, "Dependen