1. ReactJS是什么?
1). Facebook开源的一个js库
2). 一个用于动态构建用户界面的js库
2. React的特点
* Declarative(声明式编码)
* Component-Based(组件化编码)
* Learn Once, Write Anywhere(支持客户端与服务器渲染)
* 高效
* 单向数据流
3. React高效的原因
1). 虚拟(virtual)DOM, 不总是直接操作DOM
2). 高效的DOM Diff算法, 最小化页面重绘
4. 模块与组件的概念
* 模块: 向外提供特定功能的js程序, 一般就是一个js文件
作用: 简化js的编写, 阅读, 提高运行效率
* 组件: 用来实现特定功能效果的代码集合(html/css/js)
作用: 复用, 简化项目编码, 提高运行效率
5. 模块化与组件化
* 模块化:
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
* 组件化:
当应用是以多组件的方式实现功能, 这个应用就是一个组件化的应用
6.入门案例
react.js: React的核心库
react-dom.js: 提供操作DOM的扩展库
babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
在页面中导入js
编码
<script type="text/babel"> //必须用babel
 <div id="demo"></div>

 <script type="text/javascript" src="../js/react.js"></script>
<script type="text/javascript" src="../js/react-dom.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//页面中的真实容器元素
var containDiv = document.getElementById('demo');
//react的虚拟DOM对象
var vDom = <div id="demo">Hello, React!</div>; //不是字符串, 不能加引号
//将虚拟DOM对象渲染到页面元素中
ReactDOM.render(vDom, containDiv);
//页面结果: <div id="demo"><div id="demo">Hello, React!</div></div>
</script>

7.JSX语法

JSX 即JavaScript XML,它是一种在React 组件内部构建标签的类XML语法,使用JSX可以提高组件的可读性,因此推荐使用。JSX最终会被转换为JavaScript。
1⃣️React组件只能渲染一个根节点,这是由于js的特性,即return语句只能返回单个的值,解决办法是将要返回的值都包含在一个根对象中。
2⃣️JSX不能使用if语句,可使用三元表达式替代,或者将条件语句移动到JSX外部。
<script type="text/babel">
//初始化动态数据
var title = 'I Love you!';
var myName = 'bww';
//创建虚拟dom : JSX
var vDOM = <h1 id="myTitle" name={myName}>{title}</h1>;
//将虚拟dom渲染中页面元素中
ReactDOM.render(vDOM, document.getElementById('example1'));
</script>
8. 自定义组件(Component) :
1). 定义组件
//方式1: 工厂(无状态)函数(最简洁, 推荐使用)
function MyComponent1() {
return <h1>自定义组件标题11111</h1>
}
//方式2: ES6类语法(复杂组件, 推荐使用)
class MyComponent3 extends React.Component {
render () {
return <h1>自定义组件标题33333</h1>
}
}
//方式3: ES5老语法(不推荐使用了)
var MyComponent2 = React.createClass({
render () {
return <h1>自定义组件标题22222</h1>
}
})
2). 渲染组件标签
ReactDOM.render(<MyComponent/>, document.getElementById('example'));
注意:
1). 返回的组件类必须首字母大写
2). 虚拟DOM元素必须只有一个根元素
3). 虚拟DOM元素必须有结束标签
ReactDOM.render()渲染组件标签的基本流程
1). React内部会创建组件实例对象
2). 得到包含的虚拟DOM并解析为真实DOM
3). 插入到指定的页面元素内部
9.组件实例对象3大属性之一: props属性
1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中
3. 内部读取某个属性值: this.props.propertyName
4. 作用: 通过标签属性从组件外向组件内传递数据(只读)
5. 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
6. 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
7. 默认属性值
Person.defaultProps = {
name: 'Mary'
};
8. 组件类的构造函数
constructor (props) {
super(props);
console.log(props); // 查看所有属性
}

 //缺失时设置默认属性
Person.defaultProps = {
sex: '男',
age: 18
};
//初始化数据
let person = {name: 'atguigu', sex: '女', age: 3};
//根据数据动态渲染组件标签
/*ReactDOM.render(<Person name={person.name} age=
{person.age} sex={person.sex}/>,
document.getElementById('example'));*/
ReactDOM.render(<Person {...person}/>,
document.getElementById('example')); const person2 = {name: 'kobe', sex: '女'};
ReactDOM.render(<Person {...person2}/>,
document.getElementById('example2'));

 <script type="text/babel">
//定义内部标题组件
class Welcome extends React.Component {
render() {
return <h2>Welcome {this.props.name}!</h2>;
}
}
Welcome.propTypes = {
name: React.PropTypes.string.isRequired
};
//定义外部应用组件
class App extends React.Component {
render() {
return (
<div>
{
this.props.names.map(
(name, index) => <Welcome name={name} key={index}/>
)
}
</div>
);
}
}
App.propTypes = {
names: React.PropTypes.array.isRequired
}; /**********************************************************/ var names = ['Tom', 'Jack', "Bob"];
ReactDOM.render(<App names={names}/>, document.getElementById('example'));
</script>
10. 组件实例对象的3大属性之二: refs属性
1). 组件内的标签都可以定义ref属性来标识自己
2). 在组件中可以通过this.refs.refName来得到对应的真实DOM对象
3). 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)
* <input ref='username' />
* this.refs.username //返回input对象
事件处理
1). 通过onXxx属性指定组件的事件处理函数(注意大小写)
* React使用的是自定义(合成)事件, 而不是使用的DOM事件
* React中的事件是通过委托方式处理的(委托给组件最外层的元素)
2). 通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}
强烈注意
1). 组件内置的方法中的this为组件对象
2). 在组件中自定义的方法中的this为null
* 强制绑定this
* 箭头函数(ES6模块化编码时才能使用)

 class RefsTest extends React.Component {
constructor (props) {
super(props); this.showMsg = this.showMsg.bind(this); // 强制给showMsg()绑定this(组件对象)
this.handleBlur = this.handleBlur.bind(this);
} showMsg() {
// console.log(this); //this默认是null, 而不组件对象
const input = this.refs.msg;
alert(input.value);
} handleBlur(event) {
const input = event.target;
alert(input.value);
} render () {
return (
<div>
<input type="text" ref="msg"/>
<button onClick={this.showMsg}>提示输入数据</button>
<input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
</div>
);
}
}

11.组件实例对象3大属性之: state属性
1). 组件被称为"状态机", 通过更新组件的状态值来更新对应的页面显示(重新渲染)
2). 初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
3). 读取某个状态值
this.state.statePropertyName
4). 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
12.受控组件
class TwoWay extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: 'atguigu'
}
this.handleChange = this.handleChange.bind(this)
} handleChange(event) {
let msg = event.target.value
this.setState({msg})
} render() {
return (
<div>
<input type="text" value={this.state.msg} onChange={this.handleChange}/>
<p>{this.state.msg}</p>
</div>
)
}
}

 

react入门(上)的更多相关文章

  1. react入门(3)

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  2. react入门(1)

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  3. react入门(2)

    接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...

  4. react入门(4)

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  5. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  6. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  7. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  8. React入门资源整理

    另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...

  9. React入门2

    React 入门实例教程 最简单开始学习 JSX 的方法就是使用浏览器端的 JSXTransformer.我们强烈建议你不要在生产环境中使用它.你可以通过我们的命令行工具 react-tools 包来 ...

  10. react入门——慕课网笔记

    一. jsx 1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性 类似的还有(coffeescript,typescr ...

随机推荐

  1. 洛谷CF895C Square Subsets(线性基)

    洛谷传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 题意: 给你n个数,每个数<=70,问有多少个集合,满足集合中所有数相乘是个完全平方数(空集除外) 题解: 完全看不出这玩意儿和线性基有什 ...

  2. [HNOI2010] 弹飞绵羊 bounce

    标签:分块.题解: 200000,而且标号从0开始,很符合分块的条件啊.看看怎么实现. 首先分成√n个区间,然后如果我们对于每一个位置i,求出一个Next[i]和step[i],分别表示跳到的后一个位 ...

  3. Mol Cell Proteomics. |阳梦如|富马酸二甲酯在神经元和星形胶质细胞中新蛋白质靶点的鉴定及相关功能验证

    大家好,本周分享的是发表在Molecular & Cellular Proteomics.上的一篇关于富马酸二甲酯在脑细胞蛋白质中新作用靶点的鉴定及功能性验证的文章,题目是Identifica ...

  4. iOS 7 隐藏特性

    当 iOS7 刚发布的时候,全世界的苹果开发人员都立马尝试着去编译他们的app,接着再花上数月的时间来修复任何出现的故障,甚至重做app.这样的结果,使得人们根本无暇去探究 iOS7 所带来的新东西. ...

  5. 关于idea中使用lamb表达式报错:ambda expressions are not supported at this language level

    我使用的是jdk1.8,使用lamb表达式的时候,报错 ambda expressions are not supported at this language level, 后来,设置了 接着重启了 ...

  6. JavaSE 帮助文档下载

  7. django 模板语言的注释操作

    Django在HTML里面书写的模板语言不能使用这种方法注释,这样注释实际依然有效 <!--{% if text %}--> 第一种使用模板标签{% comment %}注释,这是块注释 ...

  8. [已读]JavaScript高级程序设计(第3版)

    从去年开始看,因为太长,总是没有办法一口气把它看完,再加上它与第二版大部分一致,读起来兴致会更缺一点. 与第二版相比,它最大的改变就是增加了很多html5的内容,譬如:Object对象的一些新东西,数 ...

  9. 如何连接MDB数据,并且获取相关的数据

    不说了直接上代码: try{ String str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source='" + address + & ...

  10. jruby+watir-webdriver+cucumber自动化测试环境配置

    1.安装java运行时环境,且配置环境变量 2.安装jruby环境,建议选择安装1.6.8或1.6.7版本的 3.安装需要的gem包 gem install activerecord -v='3.0. ...