1,通过createElement创建元素 HELLO Word

ps:切记组建名称首字母大写

2,虚拟DOM

在虚拟DOM上操作 通过render来渲染真是DOM

3,JSX

JSX 是对JS的语法扩展,在JS中类似HTML的方法创建React

var JsxDom = React.createClass({

  render:function(){

    var html =<div>

                 <div className="ez-led">Hello, React!</div>
                 <div className="ez-led">2016-10-19</div>
                 <div className="ez-led">我是马习习</div>

    </div>

    return html;

  }

红色部分为JSX 能让我们像是拼写字符串一样去写HTML、

4,Props

无状态组件 表现形式:通过外部传入的props属性,根据自身状态来做出不同的反应。

var  JsxDom = React.createClass({

  render:function(){

  var num = this.props.set;

  var style ={

    'color':'red',

    'fontSize':'24px'   //驼峰写法

  }

    var html =<div>

                 <div className="ez-led">Hello, React!</div>
                 <div className="ez-led">2016-10-19</div>
                 <div className="ez-led">我是马习习</div>

    </div>

    return html;

  }

});

})

React.render(<JsxDom ></JsxDom >,document.getElementById("XXX"));

5,State

状态机:A组件里有B组建 A组件的一个state改变 会重新渲染render函数 B组件也重新绘制

  • state - 组件的状态变量 保存组件的当前状态,可以再任何时候通过this.state来获取到当前状态
  • getInitialState() - 设置组件初始状态
  • setState(currentState) - 设置组件当前状态 会重新渲染

6,this.props和this.state

this.props是指那些一旦定义了就不在修改的特性。this.state会随着用户的交互而随之产生变化。

7,表单

(1)文本输入框

不要使用value属性设置文本输入框元素的初值,应当使用defaultValue:

<input type="text" defaultValue="demo"/>

8,生命周期

组建的生命周期分成三种状态

  。Mounting:已插入真实DOM

  。Updating:正在被重新渲染

  。Unmounting:已移除真实DOM

React 为每个状态都提供了两种处理函数,will函数在进入状态之前调用,did函数在进入状态之后调用,三种状态5种处理函数。

  。componentWillMount() ------组件实例即将挂接(初次渲染)时被调用,这个方法在整个生命周期中只会被调用一次

  。componentDidMount() -------组建实例挂接(初次渲染)后被调用,这个方法在整个生命周期中只会被调用一次

  。componentWillUpdate(object nextProps, object nextState) ------组件实例即将重新渲染时被调用,这个方法在初次渲染时不会被调用。注意:不能再次方法内调用setState().

  。componentDidUpdate(object prevProps, object prevState)   -----组建实例重新渲染后被调用

  。componentWillUnmount() ---- 组件实例即将从DOM树移除时被调用,这个方法在整个生命周期中只会被调用一次

此外 React还提供了2中特殊的状态处理函数

  。componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用。参数object表示即将应用到组件实例上的新属性值。这个方法在初次渲染时不会被调用。在此方法内调用setState()不会引起重新渲染。

  。shouldComponentUpdate(object nextProps, object nextState)组件判断是否重新渲染时调用

React 初学整理的更多相关文章

  1. React笔记整理

    大概大半年时间都在用react写项目,一直在笔记上零零星星地记录着,在新的一年即将到来之际,打算整理整理发出来. 一.React是什么? React是Facebook开源的用于构建用户界面的javas ...

  2. react初学之render返回加括号的问题

    刚在学习react的初始阶段,跑了一段代码 var  Mydom = React.createClass({ render:function(){ return <div> <inp ...

  3. webpack react 错误整理

    1.ERROR in ./src/entry.js Module build failed: SyntaxError 解决方法: 安装babel-preset-react,  npm install ...

  4. React 初学

    React.createClass({}); getInitialState,this.setState({}); {}解读代码块,外层不要加引号,比如onChange={this.handleCha ...

  5. react初学

    react和vue一样都是mvvm的这种开发模式. 下载js文件 引入HTML文件里 <!DOCTYPE html> <html> <head> <scrip ...

  6. React初识整理(五)--Redux和Flux(解决状态传递问题)

    Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...

  7. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  8. React初识整理(二)--生命周期的方法

    React生命周期主要有7中: 1. componentWillMount() :组件将要挂载时触发 ,只调用1次 2. componentDidMount() :组件挂载完成时触发,只调用1次 3. ...

  9. React初识整理(一)

    一.React的特点 1.自动化的UI状态管理:自动完成数据变化与界面效果的更新. 2.虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然 ...

随机推荐

  1. Eclipse启动分析

    最近研究了一下Eclipse的启动过程,查了点资料,也有点收获.下面是搜集到的一个比较好的说明,共享下... 在Eclipse启动过程中,Eclipse.exe负责启动,也就是把startup.jar ...

  2. java-Filter

    java-Filter 过滤器是小型的Web组件,它们负责拦截请求以及响应,以便查看.提取或以某种方式操作正在客户机和服务器之间交换的数据.简单的说,过滤器就类似于客户端发送的web请求与服务器之间的 ...

  3. IBM powerVM VIOS

    引言 随着信息化技术不断发展,各个企业 IT 基础架构也在不断朝向虚拟化,大数据,云计算等精简,整合的趋势发展.虚拟化技术就显得尤为重要.今天要给大家介绍的是 Power 服务器虚拟化技术中的一小部分 ...

  4. java基本加密算法

    简单的java加密算法有: BASE64 严格地说,属于编码格式,而非加密算法 MD5(Message Digest algorithm 5,信息摘要算法) SHA(Secure Hash Algor ...

  5. JavaWeb学习系列——第一个JavaWeb程序

    创建JavaWeb项目 Eclipse中新建一个Dynamic Web Project 指定项目名称.依赖环境 勾选生成web.xml选项 更改项目编译输出目录,项目右键 ->propertie ...

  6. ECMAScript 6中的数组操作方法

    本文介绍ECMAScript 6即将带给我们新的数组操作方法,以及在怎样在现有浏览器应用这些新的数组特性. Note: 我将使用交替使用构造器(constructor)和类(class)两个术语. 类 ...

  7. CentOS下安装JDK7 转载

    转载地址:http://www.cnblogs.com/rilley/archive/2012/02/02/2335395.html CentOS下安装JDK7 下载地址:http://www.ora ...

  8. 50款免费名片设计模板 PSD 源文件下载《上篇》

    名片它可能是给你的客户留下正面的印象第一步,另一方面,名片是一个企业最重要和最符合成本效益的营销工具之一,尤其是对于刚刚起步的企业.这里收集了50款免费的名片设计模板,提供 PSD 源文件下载. 您可 ...

  9. 使用aspose.cell动态导出多表头 EXCEL

    效果图: 前台调用: using System; using System.Collections.Generic; using System.Linq; using System.Web; usin ...

  10. The Linux Process Principle,NameSpace, PID、TID、PGID、PPID、SID、TID、TTY

    目录 . 引言 . Linux进程 . Linux命名空间 . Linux进程的相关标识 . 进程标识编程示例 . 进程标志在Linux内核中的存储和表现形式 . 后记 0. 引言 在进行Linux主 ...