初探react
知道这个框架有一段时间了，可是项目中没有用到，也懒得整理，最近两天比较清闲，又想起了它。好了，废话不多说了，都是干货。
- react是个什么框架？
- 为什么用react?
- react 的原理
- react有什么特点？
- 语法 & 几个小例子
react的一些总结
react是个什么框架？
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。
很多人认为 React 是 mvc 中的 V（视图）,它可以与其他的框架共存；
react 的原理
在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而 复杂或频繁的DOM操作通常是性能瓶颈产生的原因 （如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了 虚拟DOM（Virtual DOM） 的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化，而只需要根据数据刷新整个页面。换句话说，任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。
借用Facebook介绍React的视频中聊天应用的例子，当一条新的消息过来时，传统开发的思路如上图，你的开发过程需要知道哪条数据过来了，如何将新的DOM结点添加到当前DOM树上；而基于React的开发思路如下图，你永远只需要关心数据整体，两次数据之间的UI如何变化，则完全交给框架去做。可以看到，使用React大大降低了逻辑复杂性，意味着开发难度降低，可能产生Bug的机会也更少。
为什么用react?
react为了解决：随着时间数据不断变化的大规模应用程序。主要采用下面的思想：
- 简单
仅当表现当某一个时间点的应用程序长什么样子，然而当底层数据发生变化，视图数据自动更新；
- 声明式
数据变化，只是更新变化的部分（这是react的特别之处，下面会讲到）
react有什么特点？
- 有虚拟的dom树，每次数据更新会对比更改的数据，只做diff的更新；
- 事件循环内的两次数据变化会被合并，列如，数据从A改成B，然后从B改成A，react会认为没有发生任何变化；
- react推荐以组件化的方式去重新思考构建UI，主要考虑组件间的分离 ；
语法 & 几个小例子
好吧，先从最熟悉的hello world
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
// ** Our code goes here! **
</script>
</body>
</html>
这边主要引入2个js,分别是react.js 和 JSXTransformer.js,他们需要首先加载，其中JSXTransformer.js是将jsx转换成javascript语法的。这一步很耗时间，实际应用的时候，应该放到服务器上完成。
下面我们看下react的基本方法
React.render是React最基本的方法，是将jsx转换成html ,并且插入到DOM
React.render(
<h1>Hello, world!</h1>,
document.getElementById('container')
);
这里需要注意的是，react并不依赖jQuery，当然我们可以使用jQuery，但是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。
到这里我们已经迈入了React的大门。
下面说下jsx的语法
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
一定要使用JSX吗？
这个不一定，你不需要为了 React 使用 JSX，可以直接使用纯粹的 JS。但我们更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。
对于非专职开发者（比如设计师）同样比较熟悉。XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。
它没有修改 JavaScript 语义。
再来个稍微复杂些的例子，做个搜索功能
React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用。
搜索
首先搜索肯定是要有个search的文本框&&搜索按钮
var Search = React.createClass({
render: function() {
return (
<div>
{this.props.searchType}:<input type="text" />
<button>Search</button>
</div>
);
}
});
后面根据不同的内容去搜索（title,content）
var Page = React.createClass({
render: function() {
return (
<div>
<h1>Welcome!</h1>
<Search searchType="Title" />
<Search searchType="Content" />
</div>
);
}
});
最后render渲染添加到DOM
React.render(
<Page />,
document.getElementById('container')
);
注意标红处
1、获取属性的值用的是this.props.属性名
2、创建的组件名称首字母必须大写。
状态切换改变（组件其实是状态机State ）
var InputState = React.createClass({
getInitialState: function() {
return {enable: false};
},
handleClick: function(event) {
this.setState({enable: !this.state.enable});
},
render: function() {
return (
<p>
<input type="text" disabled={this.state.enable} />
<button onClick={this.handleClick}>Change State</button>
</p>
);
}
});
React.render(
<InputState />,
document.getElementById('container')
);
我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值.
1、getInitialState函数必须有返回值，可以是NULL或者一个对象。
2、访问state的方法是this.state.属性名。
3、变量用{}包裹，不需要再加双引号。
4、组件的生命周期
组件的生命周期分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
react的一些总结
1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。
2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。
3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4、组件名称首字母必须大写。
5、变量名用{}包裹，且不能加双引号。
参考文档：http://www.tuicool.com/articles/ii6Nn2
初探react的更多相关文章
- 初探React，将我们的View标签化
前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...
- 初探React与D3的结合-或许是visualization的新突破？
自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- 初探react(一)
我们学习react首先是要了解react是什么,以及他的特点. React 是一个用于构建用户界面的 JAVASCRIPT 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网 ...
- React事件初探
作者:朱灵子 React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库.创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序 ...
- React源码剖析系列 － 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- React 源码剖析系列 － 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- React+DvaJS 之 hook 路由权限控制
博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...
- Python爬取CSDN博客文章
0 url :http://blog.csdn.net/youyou1543724847/article/details/52818339Redis一点基础的东西目录 1.基础底层数据结构 2.win ...
随机推荐
- DC DC降壓變換器ic 工作原理
目前DC/DC轉化器大致可分為:升壓型dc dc變化器.降壓型dc dc變化器及可升壓又可降壓dc dc變換器.我們今天主要提一下降壓型dc dc變換器的原理: 見下圖降壓變換器原理圖如圖1所示, 當 ...
- KEIL C51高级编程
第一节 绝对地址访问C51提供了三种访问绝对地址的方法: 1. 绝对宏:在程序中,用“#include”即可使用其中定义的宏来访问绝对地址,包括:CBYTE.XBYTE.PWORD.DBYTE.CWO ...
- 揭开.NET消息循环的神秘面纱（GetMessage()无法取得任何消息，就会进入Idle（空闲）状态，进入睡眠状态（而不是Busy Waiting）。当消息队列不再为空的时候，程序会自动醒过来）
揭开.NET消息循环的神秘面纱(-) http://hi.baidu.com/sakiwer/item/f17dc33274a04df2a9842866 曾经在Win32平台下奋战的程序员们想必记得, ...
- 【动态规划】XMU 1560 新ACM规则
题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1560 题目大意: 给定n(n<=200)个任务及每个任务的耗时,问m(m< ...
- 慕课网《Android智能机器人“小慕”的实现》项目上手操作与代码解读【2】
前几天有点忙,一直没写第三方API是怎么调用的,今天我先介绍一下如何调用图灵机器人第三方API. 一.图灵机器人API的调用 首先登录图灵机器人官网首页http://www.tuling123.com ...
- Android Studio开发环境部署
Step0:背景,那些年-- Step1:安装JDK Step2:安装Android Studio 其他问题1:安装Android Studio之前没有先安装JDK 其他问题2:No JVM inst ...
- Java程序员需要注意的五大Docker误区
Docker现在很火,容器技术看上不无所不能,但这实际上是一种误解,不要被炒作出来的泡沫迷住双眼,本文抛去炒作,理性地从Java程序员的角度,列举出Docker目前的五大误区,帮助你更好地理解Dock ...
- A - ACM Computer Factory - poj 3436（最大流）
题意:有一个ACM工厂会生产一些电脑,在这个工厂里面有一些生产线,分别生产不同的零件,不过他们生产的电脑可能是一体机,所以只能一些零件加工后别的生产线才可以继续加工,比如产品A在生产线1号加工后继续前 ...
- Redis需要你来做的算法优化
阅读一个优秀的Server内核实现,早期的代码比后期的代码要好得多.因为在早期的代码里,你可以学习到一个黑客级别的程序猿到底在思考什么.同时,你能看到他哪里写得差劲,以及后来是怎么优化的. 如果你一心 ...
- trigger()和triggerHandler()
trigger()方法触发事件后,还会执行浏览器的默认事件,例如: $('input').trigger("focus); 这一行代码不仅会触发为<input>元素绑定的focu ...