React学习系列一
系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts
我是初学者,英语也不是很好,不过一直强迫自己看英文文档。
这是理解翻译,翻译的不好,请见谅!()中的是我翻译过程中理解,参考下,有什么说的不对的欢迎指点下!
第一节:如何开始react和了解react的概念
1.React是什么
react是Facebook 开发出来用于促进UI交互,创建带有状态的,可复用的UI组建的UI库!Feacebook的产品广泛运用这技术,Instagram.com(一款图片分享应用)基于react开发出来的。(这里的理解难点在于 带有状态的,可复用的UI组件。也就是一个UI组件,它带有状态属性,并且可重复使用!)
react的最大的卖点就是,react不仅可以在浏览器端使用,还可以在服务端使用,还可以两端一起使用!
react的底层的概念:react运用的是Virtual DOM(虚拟DOM),然后根据UI组件的状态变化,有选择的渲染DOM的节点树!它尽可能的操作最少的DOM来更新UI组件。
2.虚拟DOM是如何工作的?
想象下,你建立一个关于人的对象。这对象拥有人的每一个属性,然后这对象就像镜子一样,映射出一些人中每一个人的所有属性。这就是React与DOM的主要关系。
(我是这么理解的,React的虚拟DOM尽可能的拥有DOM的一切属性,然后在应用中使用虚拟DOM映射出当前应用需要的所有DOM节点!)
现在,如果我们给这个对象,添加一个胡子、一些肱二头肌、Steve Buscemi 的眼睛(给人对象的某个实例添加这些)。在react中,当我们需要这些变化产生,(react)会发生两件事。第一件事,就是react会运行"差异"算法,也就是前跟后发生了哪些变化。第二件事,就是把这种"差异"算法的出的结果更新到DOM上(应该是虚拟DOM)
React的这种运行模式不同于依照变化前的人,然后开始重新把这些变化后的人塑造出来(我是这里理解的,原本的DOM要变化一个节点,需要新建一个节点再把变化加上去,然后再去替换之前的节点。而react的方式,就是在它自己的虚拟DOM上直接把需要变化的地方,变化下OK了)。它只需要换下脸和手臂。这就意味着,如果你想要在input输入框中把一些文本渲染出来,只要输入框的父节点没有安排改变,它将会保持原状!(只修改要变化的,不要变化的保持原状!)
3.开始React的准备
第一步,下载开发包。下载地址:http://facebook.github.io/react/downloads/react-0.11.2.zip
你也可以用bower安装新版的react。
bower install react
第二步,在页面中引入react库。
在页面中引入react库,分别引入react.js和JSXTransformer.js这两个文件。然后在自己的type为text/jsx的srcipt标签中写应用组件。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/react/react.js"></script>
</head>
<body>
<div id="mount-point"></div>
<script type="text/jsx">
//这里的type是text/jsx
//这里你的代码
</script>
</body>
</html>
在react中,组件都是绑定到一个元素中,上面的例子就是用id 为mount-point的div作为组件的容器。
这种事开始react的最简单的方法。但在实际应用中,使用Browserify或者webpack把组件代码放到单独文件中的方法更好。
4.React的基础
现在我开始一个简单的展示:
<script type="text/jsx">
React.render(
<h1>Hellow, World!</h1>,
document.getElementById('mount-point')
)
</script>
用浏览器打开html页面,效果就是:
5.JSX
这种写法叫JSX。这是一种javascript XML语法的转换(javascript 中的XML语法)。这可以让你在javascript中编写html标签。其实你编写的是基于对象展现的XML。
对于常规的html标签,在JSX中class属性是className,for属性是htmlFor。应为class、for等都是javascript的保留字。更多的不同你可以看这里 (http://facebook.github.io/react/docs/jsx-gotchas.html)
如果你不用JSX语法编写,用存粹的javascript的语法你可以这么写。
<script type="text/javascript">
React.render(
React.DOM.h1(null, 'Hello, World!'),
document.getElementById('mount-point')
)
</script>
在网页中也能显示出Hello, World!
6.组件
当时调用render的方法时,它的第一个参数就是就要选人的组件。第二个参数就是你想定绑定的DOM节点。
我们可以使用createClass方法创建一个自定义的组件。它接受一个对象格式的参数。例子如下:
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, world!</h1>
);
}
});
创建了一个组件之后,可以把MyComponent渲染到我们的DOM中:
React.render(
<MyComponent/>,
document.getElementById('mount-point')
)
7.Props
当我们使用定义的组件时,我们可以给它添加props属性。这属性非常有作用,在我们的组件中作为this.props。当我们想要渲染动态数据就使用它。
列子如下:
var MyComponent = React.createClass({
render: function () {
return (
<h1>Hello, {this.props.name}!</h1>
);
}
});
React.render(
<MyComponent name="Ailen"/>,
document.getElementById('mount-point')
)
显示结果就是:
8.规范,生命周期和状态
创建一个组件, render 方法是唯一需要的规范。但我们的组件想要完成其他一些事情时,这里有几个生命周期方法和规范供组件有效的完成这些事情。
生命周期方法:
1.componentWillMount(组件将要安装绑定):在客户端和服务端 组件被渲染之前,componentWillMount执行一次。
2.componentDidMount (绑定安装过的组件): 组件渲染完成后仅在客户端compoentDidMount调用一次。
3.shouldComponentUpdate(应该更新的组件):返回值决定组件是否要更新。
4.componentWillUnmount(将要取消安装绑定的组件):优先调用要取消安装绑定的组件。
(这里我也是一知半解)
Specs(规格,规范)
1.getInitialState: 为状态返回一个初始化值。
2.getDefaultProps:如果为提供props,设置回退的props值。
3.mixins: 通过一个关于对象的数组来扩展组件的功能性。
关于更多的specs 和 lifecycle方法可以点击链接:http://facebook.github.io/react/docs/component-specs.html
State(状态)
每个组件都有一个state对象和一个props对象。state使用setState方法,调用setState来触发视图更新和React的交互性。如果我们想在交互发生之前设置一个默认的状态,可以使用getInitialState方法。下面举例演示组件的状态:
var MyComponent = React.createClass({
getInitialState: function () {
return {
count: 5
}
},
render: function () {
return (
<h1>{this.state.count}</h1>
)
}
});
React.render(<MyComponent/>, document.getElementById('mount-point'));
9.Event(事件)
react也提供一套能够兼容各浏览器的事件系统。这些事件作为属性添加组件上可以触发方法。
下面我们通过事件来实现count自增。
var MyComponent = React.createClass({
incrementCount: function () {
//修改state 通过setState方法
this.setState({
count: this.state.count + 1
})
},
//getInitialState 初始化state的值
getInitialState: function () {
return {
count: 5
}
},
render: function () {
return (
//友情提醒、react的组件必须用一个一个容器包裹下。也就是这里的div。如果只有一个标签例如:<h1>hello, world!</h1>就不需要div包裹了。
<div>
<h1>{this.state.count}</h1>
<button type="button" onClick={this.incrementCount} >Increment</button>
</div>
)
}
});
React.render(<MyComponent/>, document.getElementById('mount-point'));
感觉很酷哦!
10.Unidirectional Data Flow(单向数据流)
react中,应用的数据传递是单向的通过state和props对象,不同于angular的双向数据绑定。单向数据流的意思就是,在一个多组件构成的应用中,每一个父组件负责管理state并且通过props传递给下一层组件。
状态(state)通过setState方法来更新,来确保UI更新发生。如果有必要state的最终结果值应该被当作 子组件的属性 传递给子组件,在子组件中通过this.props来获取值。
下面来举例:
var FilteredList = React.createClass({
//自定义的过滤方法
filteredList: function (event) {
var updateList = this.state.initialItems;
//根据输入框的值来过滤出结果
updateList = updateList.filter(function (item) {
return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;
});
//将过滤出的值通过setState方法来更新state
this.setState({items: updateList});
}, //state 初始化方法
getInitialState: function () {
return {
initialItems: ["Apples", "Broccoli", "Chicken", "Duck", "Eggs", "Fish", "Granola","Hash Browns"],
items: []
}
},
//在组件渲染之前执行该方法
componentWillMount: function () {
this.setState({items: this.state.initialItems});
},
render: function () {
//onChange 事件来执行filteredList方法
//再将更新过的state 作为List组件的属性传递给List组件
return (
<div class="filter-class">
<input type="text" placeholder="Search" onChange={this.filteredList} />
<List items={this.state.items} />
</div>
)
}
}) var List = React.createClass({
render: function () {
//List组件中通过this.props来获取到FilteredList传递进来的值
return (
<ul>
{
this.props.items.map(function (item) {
return <li key={item}>{item}</li>
})
}
</ul>
)
}
}); React.render(<FilteredList/>, document.getElementById("mount-point"));
运行结果:
感觉还是不错的哦
11.总结
以上的都是一些关于react的基础。有时间,有问题就去查看React API:"http://facebook.github.io/react/docs/top-level-api.html"
最好也去了解下关于jsx:http://facebook.github.io/react/docs/jsx-in-depth.html
下一节,我将翻译关于学习通过express建立应用,并在服务端使用react渲染,跟前客户端一样,然后通过socket.io来使这两端保持同步。
翻译不是很好!英语水平有限啊!我会尽量将自己的理解放入进去!
上面的代码都是我自己运行过的!
React学习系列一的更多相关文章
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- React学习系列之(1)简单的demo(React脚手架)
1.什么是React? React是一个一个声明式,高效且灵活的用于构建用户界面的JavaScript库.React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 ...
- React 学习资源分享 菜鸟刚学5天 博客写的不多 不懂写博客的套路
http://www.ruanyifeng.com/blog/2015/03/react.html 首先个人强烈推荐 阮一峰的React基础 细细过一遍,看得出大师的用心良苦 然后就开始看书般的过ht ...
- React文档翻译系列(二)Hello World
这是React文档翻译系列的第二篇,前一篇介绍了如何安装react,本篇主要介绍react的知识体系,掌握了基本的知识体系,才能更好的学习React. Hello World 开始React最简单的方 ...
- 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...
- 七天接手react项目 系列 —— react 脚手架创建项目
其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- 七天接手react项目 系列 —— 尾篇(antd 和 mobx)
其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...
- react实战系列 —— 我的仪表盘(bizcharts、antd、moment)
其他章节请看: react实战 系列 My Dashboard 上一篇我们在 spug 项目中模仿"任务计划"模块实现一个类似的一级导航页面("My任务计划") ...
随机推荐
- 从零开始学习Android(二)从架构开始说起
我们刚开始学新东西的时候,往往希望能从一个实例进行入手学习.接下来的系列连载文章也主要是围绕这个实例进行.这个实例原形是从电子书<Android应用开发详解>得到的,我们在这里对其进行详细 ...
- Install Ansible on Mac OSX
from: https://devopsu.com/guides/ansible-mac-osx.html and : https://devopsu.com/guides/ansible-post- ...
- Spring MVC之@RequestBody, @ResponseBody 详解
http://blog.csdn.net/kobejayandy/article/details/12690555
- devenv.exe assert failure
使用vs2010,创建mvc2 web application项目,编译之后,调试报错 https://www.asp.net/mvc/overview/older-versions-1/gettin ...
- JMeter常用测试元件—学习笔记
线程组 Ramp-Up Period:告诉JMeter达到最大线程数需要多长时间.假定共有10个线程,Ramp-Up Period为100秒,那么JMeter就会在100秒内启动所有线程,并让它们运转 ...
- Ajax --- 数据请求
下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...
- App的启动过程
App的启动过程 所有的app都是通过launcher去启动的 launcher自己也是一个app,一个系统级别的app,放在asystem/app/下,使用系统签名. 对代码进行分析
- Macbook Pro配置PHP开发环境
Macbook Pro配置PHP开发环境 安装环境如下: Mac OS 10.10.1 Apache 2.4.9 PHP 5.5.14 MySQL 5.6.22 Apache配置 在Mac OS 10 ...
- 跨站请求伪造 CSRF / XSRF<一:介绍>
跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一 ...
- mac 下jetbrains IDE系列IDE主题
1.直接粘贴导入 使用shift+command+g键进入: ~/Library/Preferences/ 在下边找到当前的IED(WebStrom.IdealIC.PyCharm) 然后在下边找到c ...