一. 允许HTML和JavaScript代码混写,使用JSX语法:遇到HTML标签就用HTML规则解析,遇到{}的代码块就用js解析

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);

二. createClass用于生成组件类

(1)组件类都有一个render方法用于输出组件

(2)组件类第一个字母必须大写

(3)组件类只有一个顶层标签

(4)组件添加属性,class需要写成className,for需要写成htmlFor。或者使用style,style赋值不能是字符串,应该是对象形式,key值使用驼峰

(5)this.props属性与组件属性一一对应

var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
}); ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);

三. propTypes验证组件类传入的属性是否符合要求

var data = 123;

var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired, //title是必传的字符串,传入123数字控制台会报错
}, render: function() {
return <h1> {this.props.title} </h1>;
}
}); ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);

四. 组价并不是真实的DOM,而是在内存中的虚拟DOM,只有组件插入文档,才会变成真实的DOM。根据React设计,所有DOM变动都先在虚拟DOM上进行,再将实际变动部分反映在真实DOM上,这种算法叫DOM Diff,它可以极大提高网页性能。

通过ref从组件获取真实DOM节点

var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});

五. 状态机this.state:组件看成一个状态机,getInitialState定义初始状态,用户互动状态变化,触发重新渲染UI。

属性通过this.state获取,修改属性this.setState

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});

六. event.target.value 读取用户输入

绑定事件驼峰 onClick={this.handleClick},方法不加括号,加了括号不会在点击时执行,会立即执行

var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});

七. 生命周期函数:componentWillMount、componentDidMount、componentWillUpdate、componentDidUpdate、componentWillUnMount

Mounting:getInitialState、componentWillMount、render、componentDidMount
Updating:componentWillReceiveProps、shouldComponentUpdate、 componentWillUpdate、render、componentDidUpdate
Unmounting:componentWillUnmount 
参考:http://www.ruanyifeng.com/blog/2015/03/react.html 

React学习(一)的更多相关文章

  1. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  2. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  3. React学习资料

    以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...

  4. React学习笔记(一) 基础知识

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...

  5. React学习系列

    React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...

  6. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  7. react 学习与使用记录

    相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...

  8. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

  9. 【JAVASCRIPT】React学习-如何构建一个组件

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...

  10. 【JAVASCRIPT】React学习- 数据流(组件通信)

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...

随机推荐

  1. 算法day02

    算法动态演示网站 数组是有长度限制的,有类型限制 CPU计算 每次是2的32位的,32根线,支持最大是4G 数组:线性表 列表:动态表链表:存储的位置不是连续的 insert 时间复杂度是 Onapp ...

  2. mac下安装elasticsearch报错Exception BindTransportException[Failed to bind to [9300-9400]]

    解决办法:进入 config目录下 修改 vim elasticsearch.xml network.host设置为 0.0.0.0 即可外网访问.

  3. 2.MySQL 数据类型

    MySQL 数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL支持所有标准S ...

  4. 关于serialVersionUID与序列化"

    java序列化trick and trap 厂内经常出现序列化对象版本不匹配问题,于是发本文说明一些序列化的注意点 调用MQ.memcached.rpc等等涉及到远程通讯的都会经过序列化,虽然客户端透 ...

  5. delete in javascript

    Key word delete. 1. Delete global object. x = 42; // creates the property x on the global object var ...

  6. Python学习---Python数据类型1206

    1.1. 字符串格式化 字符格式化输出 占位符 %s  s = string %d  d = digit 整数 %f   f = float 浮点数,约等于小数 #version: python3.2 ...

  7. FLV视频封装格式详解

    FLV视频封装格式详解 分类: FFMpeg编解码 2012-04-04 21:13 1378人阅读 评论(2) 收藏 举报 flvheaderaudiovideocodecfile 目录(?)[-] ...

  8. HDU 1542 矩形面积并

    推荐阅读这篇文章 这里仅根据上述文章进行一些补充.主要是注意这里线段树点的意义变成了“边”.比如+-----+-----+,看作3个点abc和两条边e1和e2,那么线段树中点a代表e1,点b代表e2. ...

  9. 数据结构——平衡二叉树(AVLTree)

    3.平衡二叉树 平衡二叉树,又称AVL树,它是一种特殊的二叉排序树. 3.1 平衡二叉树的四种自旋 这个左旋.右旋,在方向上和我观念里的是相反的. 查了之后才知道: 1.外侧插入:LL.RR,都是在最 ...

  10. ubuntu16.04 Detectron目标检测库配置(包含GPU驱动,Cuda,Caffee2等配置梳理)

    Detectron概述 Detectron是Facebook FAIR开源了的一个目标检测(Object Detection)平台. 用一幅图简单说明下Object Detection.如Mask R ...