React简介

1.由来

  React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题。

2.React的优势

  解决大规模项目开发中数据不断变化变得难以操作的问题;

  组件化开发,使得开发更加快速;

  单向数据流,有利于找到问题;

  虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新;举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去;

  JSX的编译方式,将HTML代码和JS混合到一起来写,组件结构清晰,数据结构清晰,之后可以通过工具转成JS。

3.开发方式

  使用React开发可以像平常开发一样, 最后讲JSX转换一下即可,在0.14,React拆分开,所以我们需要引入三个文件

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/JSXTransformer.js"></script>

  第一个不解释,第二个文件作用是将React结构转换成HTML后插入到指定的DOM节点,第三个为转换文件,将JSX格式转换成JS格式的文件。当然正常情况下还需要引入我们写的组件(如果你没直接把组件写在HTML里的话= =#)

  另外一种开发方式就是基于node环境开发,配合webpack,gulp打造一套自动化构建工具,同时在Node里开发我们还可以配合babel使用ES6语法来编写,这里不细说。

基本语法

1.Hello World

  一切语言的学习开始都是我们熟知的这个短语~在将React转换为HTML结构的时候需要用到ReactDOM.render

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('div1')
);

  插入之前引入的JS和这个JSX文件就可以打开浏览器看一下了~

  可以看到ReactDOM.render中第一个参数为传入的组件,第二个参数为加入到某个标签里,注意,一般情况下最好不要直接添加到document.body中。

2.组件的编写

  但这显然离我们说的组件化还有十万八千里,举个简单的例子,一个简单的上中下结构的网页我们可以给它拆成三部分(当然也可以更多,这里说最简单的),那么我们就需要编写3个组件,其中头部和底部都是可以在整站的很多位置复用的。那我们开始编写我们的组件:

  

var Header = React.createClass({
render: function() {
return <h1>欢迎来到React学习站</h1>
}
}); var Main = React.createClass({
render: function() {
return (<div className="main_box">
<h2>这是一篇关于学习React的网站</h2>
<div>我是内容,哈哈哈……</div>
</div>
)}
}); var Footer = React.createClass({
render: function() {
return (<div>
<p>联系电话1333333333</p>
<p>QQ:6843521463</p>
</div>
)}
}); var Index = React.createClass({
render: function() {
return (<div>
<Header />
<Main />
<Footer />
</div>
)}
}); ReactDOM.render(
<Index />,
document.getElementById('div1')
);

  这里首先我们使用React.createClass方法定义了3个组件,再在Index组件里将三个组件包在一起,最后添加到DOMrender中。

  其中需要注意的是,在render里的代码结构如果是多层,在最外层必须包裹一层标签,否则会报错。

  定义的名字一定需要以大写开头。

3.props

  prop在当前组件里来传递数据,常见的情况是父级传给子级数据,然后子级来调用。

var ListContent = React.createClass({
render: function(){
return (
<div>
<div>{this.props.json.one}</div>
<div>{this.props.json.two}</div>
</div>
);
}
}); var All = React.createClass({
render: function(){
var json = {
'one': '这是一个用react写出来的东西',
'two': 'hello world',
};
return (
<div>
<ListContent json={json} />
</div>
);
}
}); ReactDOM.render(
<All />,document.getElementById('box')
);

  这里我们在All中定义了一个数据,然后将它传入ListContent 这个组件里,这个时候ListContent 里就有了json的数据,在里面的内容结构中就可以使用this.props来调用了,需要注意的是,在标签里插入内容需要用{}来包起来。

4.state

  React可以算是一个大的状态机,其中的数据改变几乎都来源于状态的改变,state可以用来设置这个状态,当触发某个动作的时候来改变这个state从而更新页面中相关的数据。一个简单的例子:

  

var ListContent = React.createClass({
getInitialState: function() {
return {
click: true
};
},
ShowName: function() {
this.setState({
click: false
});
alert('iceblue')
},
render: function() {return (
< div >
< button disabled={this.state.click} onClick = {this.ShowName} > 显示名字 < /button>
< /div >
);
}
}); ReactDOM.render( < ListContent /> , document.getElementById('box'));

  在初始环境我们用getInitialState(固定名字)来设定初始的state值,当然也可以不设定。这里我们设定了一个状态click,我们的想法是点击之后按钮变得不可点击。这里我们定义了一个ShowName(自定义)函数来做两件事,显示名字和改变状态,注意,最好在改变状态的函数中不添加其它作用代码,这里为了省事。这个时候当我们触发onClick(固定)事件后调用之前定义的函数,通过setState来改变click的值,这时候组件会接收到这种改变并对页面进行改变。

  基本通过props和state就可以完成一些简单的组件化开发了。

5.map

  与JQ的map类似,可以遍历子节点然后进行相应的操作,我们可以利用map来减少大量重复的代码,只需要改变其中填充的数据即可。

var number = ['1', '2', '3', '4'];
ReactDOM.render(
<div>
{
number.map(function(name,key){
return <div key={key}>这次年终有{name}个月</div>
})
}
</div>,
document.getElementById('box')
);

6.ref

  最开始的时候我们提到了React的最大特点是虚拟DOM,那么也就是说我们所创建的组件其实并不是真实的节点,只有当插入完成后才会变成真实的DOM。当状态改变后,再将算完的结构展现到页面上。如果我们需要获取真实的DOM节点就需要用到ref属性。

var MyComponent = React.createClass({
handleClick: function() {
console.log(this.refs.myTextInput);
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" value="随便写点" />
<input type="button" value="print" onClick={this.handleClick} />
</div>
)}
}); ReactDOM.render(<MyComponent/>,document.getElementById('box'));
//<input type="text" value="随便写点" data-reactid=".0.0" />

  这里首先在第一个input中定义ref,之后就能获取到真实节点并进行相应的操作了,其中data-reactid不用管,类似于DOM分层标识,可以让React清楚的知道DOM结构并作出快速的计算。

7.生命周期

  所谓生命周期就是在代码运行的不同阶段我们可以进行不同操作,其中大体有这么几种(固定名字):

  getInitialState: 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

  componentWillMount: 服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用setState,render() 将会感知到更新后的 state,执行仅一次

  componentDidMount: 在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。在生命周期中的这个时间点,组件拥有一个 DOM 展现,你可以通过 this.getDOMNode() 来获取相应 DOM 节点。

还有更多的更新组件方法
  componentWillReceiveProps: 在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用

  shouldComponentUpdate: 在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用

  componentWillUpdate: 在 state 改变的时候执行一些操作

8.事件名 

  触摸事件:onTouchCancel\onTouchEnd\onTouchMove\onTouchStart

  键盘事件:onKeyDown\onKeyPress\onKeyUp

  剪切事件:onCopy\onCut\onPaste

  表单事件:onChange\onInput\onSubmit

  焦点事件:onFocus\onBlur

  UI元素:onScroll(移动设备是手指滚动和PC的鼠标滑动)

  滚动事件:onWheel(鼠标滚轮)

  鼠标类型:onClick\onContextMenu(右键)\onDoubleClick\onMouseDown\onMouseEnter\onMouseLeave\onMouseMove\onMouseOut\onMouseOver\onMouseUponDrag\onDrop\onDragEnd\onDragEnter\onDragExit\onDragLeave\onDragOver\onDragStart

9.代码书写的注意事项

  样式:

    在React中传递数据前面提到过要用{}包起来,同理在标签内传递

    class:className={fontColor}或className="class1"

    style:style={{color:"red"}}或style={newStyle},其中newStyle为定义的样式集合{corlor:"red",height:.......}

  逻辑:

    如果想在React中插入代码,可以在代码块外面写,比如

 var MyComponent = React.createClass({
if(...){do something};
render: function() {
return (
<div>1</div>
)}
});

 

  今天就写这些,日后可能会出一些关于webpack或者redux结合react的博客,不过博主很懒,不一定啥时候了= =#,最后附上中文API地址:

  http://reactjs.cn/react/docs/getting-started.html

  

  

  

React系列(一):React入门的更多相关文章

  1. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  2. React Native 系列(一) -- JS入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  3. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  4. react系列教程

    这个系列将从基础语法讲起,把react全家桶都讲到,然后到具体的使用,最后完成后,会写一个完整的demo. 前置要求: 基本的CSS,JS要熟练. 部分ES6语法需要了解.可以参考下面提到的阮一峰老师 ...

  5. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  6. 谈谈 React.js 的核心入门知识

    近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...

  7. React 系列教程 1:实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  8. 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  9. 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽

    本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...

  10. 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

随机推荐

  1. UVA 400 Unix ls by sixleaves

    题目其实很简单,答题意思就是从管道读取一组文件名,并且按照字典序排列,但是输入的时候按列先输出,再输出行.而且每一行最多60个字符.而每个文件名所占的宽度为最大文件名的长度加2,除了输出在最右边的文件 ...

  2. 1、什么是Lucene,Lucene能干什么

    1.什么是lucene  Lucene是一个全文搜索框架,而不是应用产品.因此它并不像http://www.baidu.com/ 或者google Desktop那么拿来就能用,它只是提供了一种工具让 ...

  3. 当浏览器不支持placeholder,所执行的函数

    $(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...

  4. wxpython 拖动界面时进入假死状态(未响应)解决方法

    场景:在一个事件中调用一个函数,但是这个函数执行的时间非常的长,此过程中拖动界面的时候会使得界面进入未响应状态,直到函数执行完才可以ok 解决方法: 在调用函数的时候使用多线程调用 import th ...

  5. Android 4.4 Kitkat 使能 USB adb 功能

    背景 在 Linux-3.8 以后,Android 的内核分支,便去掉了 f_adb,改使用 USB function FS,在用户空间实现 USB adb 功能.这篇文章依据原作者的 Google+ ...

  6. 好用的DNS服务器推荐

    DNS在平时上网中扮演重要角色,如果不注意DNS的话,可能会导致网速慢.弹窗广告.网址打不开.打开不是自己想要的网站.淘宝客劫持等一系列问题.针对DNS的问题,网络上也有各种DNS平台供用户选择.这里 ...

  7. 第003篇 深入体验C#项目开发(二)

    下半本的5个项目也看完了,还是跳着看,只看大概!        第6章 企业交互系统            作者入职一年,开始带新的2个实习生的项目!一个外资企业内部的OA交互系统,这次又是一个基于w ...

  8. 跳跃表 C#

               虽然avl树和红黑树在数据搜索和排序方面都是有效的数据结构,但是都显得特别麻烦,跳跃表就显得特别简单,虽然简单 不影响他性能,在平均情况下,其插入.删除.查找数据时间复杂度都是O ...

  9. javascript 正则表达式代码

    正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表 ...

  10. 【noip2012提高组】国王游戏

    恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 成一排,国王站在队伍的最前面. ...