React学习(一)
一. 允许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
参考:http://www.ruanyifeng.com/blog/2015/03/react.html
React学习(一)的更多相关文章
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- 【JAVASCRIPT】React学习-如何构建一个组件
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...
- 【JAVASCRIPT】React学习- 数据流(组件通信)
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
随机推荐
- VC listBox控件的方法
获取listBox里所有行数 GetCount(); 设置某行的选中状态 SetSel(index,true);第一个参数是行号,第二个参数是否选中
- Spring学习---Spring中利用jackson进行JSON转换
Spring中利用jackson进行JSON转换 import java.util.List; import com.fasterxml.jackson.core.JsonProcessingExce ...
- JavaScript学习---JavaScript深入学习
对象的概念 对象分类[3种]: ECMScript(JS自己的对象), BOM(浏览器对象) DOM(文档对象,操作HTML的) 11种内置对象: Array ,String ...
- 【2017.10.13 ROS机器人操作系统】ROS系统常用术语及资源
ROS机器人操作系统是一种后操作系统,提供了类似于软件开发中使用到的中间件的功能. ROS: Robot Operating System 机器人操作系统 Package: 功能包 Stack: 功能 ...
- hdu 5521 Meeting(最短路)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5521 题意:有1-n共n个点,给出m个块(完全图),并知道块内各点之间互相到达花费时间均为ti.已知两 ...
- Java类修饰符的使用与作用以及常见问题
首先明确,类是放在文件里的,在文件里面的不同位置就有不同的作用,就是不同类型的类. 1, 顶级类or外部类:包括两种,一个文件中与文件名同名称的类我们称作顶级类(也是外部类),如果在一个文件中的一个类 ...
- SHA1WithRSA
SHA1WithRSA:用SHA算法进行签名,用RSA算法进行加密. 算法说明: 在对进行SHA1算法进行签名后,要求对签名后的数据进行处理,而不是直接进行RSA算法进行加密. 要求把SHA1签名 ...
- [转载] MySQL数据库5.X版本基本手工注入总结
MySQL数据库5.X版本基本手工注入总结 根据我对MySQL的认识,注入时,基本可以通过爆.盲注.报错三种方式获得用户名和密码,在权限足够的情况下,还可以直接通过SQL语句插入并导出我们的一句话we ...
- Owin+ASP.NET Identity浅析系列(二)扩展用户属性
在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<Owin+ASP.NET Identity浅析系列>来祭奠那逝去的…… 上一篇博客讲了用户登录注册问 ...
- Apollo2.5摄像头安装
前言:在Apollo美研团队和长沙CiDi团队的支持下,最近完成了Apollo推荐的摄像头AR023ZWDR(Rev663F12)调试,在这里对Apollo的笔记做一个补充,希望以后的开发者不用在踩我 ...