一. 允许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. VC listBox控件的方法

    获取listBox里所有行数 GetCount(); 设置某行的选中状态 SetSel(index,true);第一个参数是行号,第二个参数是否选中

  2. Spring学习---Spring中利用jackson进行JSON转换

    Spring中利用jackson进行JSON转换 import java.util.List; import com.fasterxml.jackson.core.JsonProcessingExce ...

  3. JavaScript学习---JavaScript深入学习

    对象的概念 对象分类[3种]:     ECMScript(JS自己的对象), BOM(浏览器对象)    DOM(文档对象,操作HTML的) 11种内置对象:       Array ,String ...

  4. 【2017.10.13 ROS机器人操作系统】ROS系统常用术语及资源

    ROS机器人操作系统是一种后操作系统,提供了类似于软件开发中使用到的中间件的功能. ROS: Robot Operating System 机器人操作系统 Package: 功能包 Stack: 功能 ...

  5. hdu 5521 Meeting(最短路)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5521 题意:有1-n共n个点,给出m个块(完全图),并知道块内各点之间互相到达花费时间均为ti.已知两 ...

  6. Java类修饰符的使用与作用以及常见问题

    首先明确,类是放在文件里的,在文件里面的不同位置就有不同的作用,就是不同类型的类. 1, 顶级类or外部类:包括两种,一个文件中与文件名同名称的类我们称作顶级类(也是外部类),如果在一个文件中的一个类 ...

  7. SHA1WithRSA

    SHA1WithRSA:用SHA算法进行签名,用RSA算法进行加密.   算法说明: 在对进行SHA1算法进行签名后,要求对签名后的数据进行处理,而不是直接进行RSA算法进行加密. 要求把SHA1签名 ...

  8. [转载] MySQL数据库5.X版本基本手工注入总结

    MySQL数据库5.X版本基本手工注入总结 根据我对MySQL的认识,注入时,基本可以通过爆.盲注.报错三种方式获得用户名和密码,在权限足够的情况下,还可以直接通过SQL语句插入并导出我们的一句话we ...

  9. Owin+ASP.NET Identity浅析系列(二)扩展用户属性

    在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<Owin+ASP.NET Identity浅析系列>来祭奠那逝去的…… 上一篇博客讲了用户登录注册问 ...

  10. Apollo2.5摄像头安装

    前言:在Apollo美研团队和长沙CiDi团队的支持下,最近完成了Apollo推荐的摄像头AR023ZWDR(Rev663F12)调试,在这里对Apollo的笔记做一个补充,希望以后的开发者不用在踩我 ...