通往全栈工程师的捷径 —— React

下图是 React 在国内的百度搜索指数，是拿 React 和 Nodejs 作了个对比，能够看出 React 的关注度也已经逼近 nodejs。

虽然在关注总量上 React 还远不及 jQuery 和 Angular 等等，但它的增加幅度超乎你想象，你知道这意味着什么吗？这意味着关注 React，你就比大多数人走在了业界的前沿！

1、什么是react

引用官网的简介，react就是”一个用来构建用户界面的 javascript 库”。

React 起源于 Facebook 的内部项目，由于 FB 对市场上全部 JavaScript MVC 框架，都不满意，就决定本身写一套，用来架设 Instagram 的网站。作出来之后，发现这套东西很好用，就在2013年5月开源了。

因为 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却很是简单。因此，愈来愈多的人开始关注和使用，认为它多是未来 Web 开发的主流工具。

和 Backbone、Angular 等 MV* 框架不同，它只处理 View 逻辑 ，它只处理 View 逻辑，它只处理 View 逻辑。因此若是你喜欢它，你能够很容易的将它接入到现有工程中，而后用 React 重写 HTML 部分便可，不用修改逻辑。

近几年 web 领域的技术革新很是迅速，React 也是一项新技术…话说 React 出来也已经2年了，其实并不算什么新技术了，只是在国内尚未普及开，这篇文章的目的也是帮助你们更快的理解 react 和认识 react 能给咱们带来的价值。

React 这么火，那么它到底有什么牛逼的地方？

一、首先，先跟你们描述下 React 最特别的部分，咱们来看 JSX——

JSX 使用的是预编译模板，React 提供了一个预编译工具，叫 react-tools，能够经过 npm 命令安装，通常是在开发时期运行，运行后它会启动一个监听程序，实时监听 JSX 源码的修改，而后自动编译为 JS 代码。

你们留意下，render() 方法里的被编译成了 React.createElement()，它这么作，目的就是为了实现虚拟 DOM。

2.接下来咱们来了解 React 最大的亮点 ———— 虚拟 DOM。

传统 web app 和 DOM 直接交互，由 App 来控制 DOM 的构建和渲染、元素属性的读写、事件的注册和销毁等等。 当新产品刚上线的时候，这种作法看起来也挺好。但随着产品功能愈来愈丰富、代码量愈来愈多、开发团队人员愈来愈多 —————

一年后，你的代码可能会变成这样。固然，合理的代码规划可以避免这类问题，但团队里不免会有擅长屠宰式编程的同窗，分分钟把你代码改的面目全非。

这时，React 的虚拟 DOM 和单项数据流就能很好的解决这个问题。

虚拟 DOM 则是在 DOM 的基础上创建了一个抽象层，咱们对数据和状态所作的任何改动，都会被自动且高效的同步到虚拟 DOM，最后再批量同步到 DOM 中。

虚拟 DOM 会使得 App 只关心数据和组件的执行结果，中间产生的 DOM 操做不须要 App 干预，并且经过虚拟 DOM 来生成 DOM，会有一项很是可观收益——-性能。

全部人都知道 DOM 慢，渲染一个空的 DIV，浏览器须要为这个 DIV 生成几百个属性，而虚拟 DOM 只有6个，因此减小没必要要的重排重绘以及 DOM 读写可以对页面渲染性能有大幅提高。

那么咱们来看看虚拟 DOM 是怎么作的：React 会在内存中维护一个虚拟 DOM 树，当咱们对这个树进行读或写的时候，其实是对虚拟 DOM 进行的。当数据变化时，而后 React 会自动更新虚拟 DOM，而后拿新的虚拟 DOM 和旧的虚拟 DOM 进行对比，找到有变动的部分，得出一个 Patch，而后将这个 Patch 放到一个队列里，最终批量更新这些 Patch 到 DOM 中。

这样的机制能够保证即使是根节点数据的变化，最终表如今 DOM 上的修改也只是受这个数据影响的部分，能够保证很是高效的渲染。

但这样也是有必定的缺陷的——首次渲染大量DOM时由于多了一层虚拟 DOM 的计算，会比 innerHTML 插入方式慢，因此使用时须要确保不要一次性渲染大量 DOM。

几个UI组件的渲染性能对比

3.组件。

一个最基本的 React 组件由数据和 JSX 两个主要部分构成，咱们先来看看数据。

这是一个简单单完整的 React 组件【类】，细节你们先不用太在乎细节，了解机制就能够。

props 主要做用是提供数据来源，能够简单的理解为 props 就是构造函数的参数。 state 惟一的做用是控制组件的表现，用来存放会随着交互变化状态，好比开关状态等。

JSX 作的事情就是根据 state 和 props 中的值，结合一些视图层面的逻辑，输出对应的 DOM 结构。

前面咱们知道了一个简单的组件的构成，但单个的组件确定不能知足实际需求，咱们须要作的是将这些独立的组件进行组装，同时找出共性的部分进行复用。

好比这样一个场景：

咱们以这样一个界面为例，能够看出，里面的 <Pub/> <Article/> 都是最细粒度的组件，是能够复用的。 首先，咱们来看下 Article 的代码——

这个就是咱们分解出来的 Article 组件，它须要2个属性，article 对象和 showImage。article 对象包含图片、地址、标题、描述信息，showImage 是一个布尔类型，用来判断是否须要显示成一个图片。

这个组件自己的实现能够很简单也能够很复杂，但使用者可不关心你的内部实现，使用者关心的是组件须要什么参数就能够了。但愿你们在设计模块的时候，也尽量将组件逻辑对外透明，来减小维护成本。

你们留意一下标虚线的部分，这里复用了 Article 组件。这时的 Article 组件看起来就是一个普通的标签而已，简单吧。

这个是热问组件，也复用了 Article 组件。这就是 React 如丝般顺滑的组件复合。

4.数据流

这个，叫作竹笕，是中日传统禅文化中常见的庭院装饰品，它的构造可简单可复杂，但原理很简单，好比这个竹笕，水从竹笕顶部入口流入内部，并按照固定的顺序从上向下依次流入各个小竹筒，而后驱动水轮转动。若是竹笕是一个组件的话，那么水就是组件的数据流。

在 React 中，数据流是自上而下单向的从父节点传递到子节点，因此组件是简单且容易把握的，他们只须要从父节点提供的 props 中获取数据并渲染便可。若是顶层组件的某个 prop 改变了，React 会递归地向下遍历整棵组件数，从新渲染全部使用这个属性的组件。

这个是前面看到的 Article 题组件，拥有一个叫作 articles 的属性。

在组件内部，能够经过 this.props 来访问 props，props 是组件惟一的数据来源，对于组件来讲：props 永远是只读的。

组件的属性类型若是不进行声明和验证，那么极可能使用者传给你的属性值或者类型是无效的，那会致使一些意料以外的故障。好在 React 已经为咱们提供了一套很是简单好用的属性校验机制——

React 有一个 PropTypes 属性校验工具，通过简单的配置便可。当使用者传入的参数不知足校验规则时，React 会给出很是详细的警告，定位问题不要太容易。

PropTypes 包含的校验类型包括基本类型、数组、对象、实例、枚举——

以及对象类型的深刻验证等等。若是内置的验证类型不知足需求，还能够经过自定义规则来验证。 若是某个属性是必须的，在类型后面加上 .isRequired 便可。

5.React 的一大创新，就是把每个组件都当作是一个状态机，组件内部经过 state 来维护组件状态的变化，这也是 state 惟一的做用。

state 通常和事件一块儿使用，咱们先看 state，而后看看 state 和事件怎样结合。

这是一个简单的开关组件，开关状态会以文字的形式表如今按钮的文本上。

首先看 render 方法，返回了一个 button 元素，给 button 注册了一个事件用来处理点击事件，在点击事件中对 state 的 on 字段取反，并执行 this.setState() 方法设置 on 字段的新值。一个开关组件就完成了。

6.事件。

组件渲染完成后，必须有 UI 事件的支持才能正常工做。React 经过将事件处理器绑定到组件上来处理事件。

React 事件本质上和原生 JS 同样，鼠标事件用来处理点击操做，表单事件用于表单元素变化等，Rreact 事件的命名、行为和原生 JS 差很少，不同的地方是 React 事件名区分大小写。

好比这段代码中，Article 组件的 section 节点注册了一个 onClick 事件，点击后弹出 alert。

有时候，事件的处理器须要由组件的使用者来提供，这时能够经过 props 将事件处理器传进来。

这个是刚才那个 Article 组件的使用者，它提供给 Article 组件的 props 中包含了一个 onClick 属性，这个 onClick 指向这个组件自身的一个事件处理器，这样就实现了在组件外部处理事件回调。

 

这是一个 React 组件实现组件可交互所需的流程，render() 输出虚拟 DOM，虚拟 DOM 转为 DOM，再在 DOM 上注册事件，事件触发 setState() 修改数据，在每次调用 setState 方法时，React 会自动执行 render 方法来更新虚拟 DOM，若是组件已经被渲染，那么还会更新到 DOM 中去。

这些是 React 目前支持的事件列表。

7.组件的生命周期

React 的组件拥有一套清晰完整并且很是容易理解的生命周期机制，大致能够分为三个过程：初始化、更新和销毁，在组件生命周期中，随着组件的 props 或者 state 发生改变，它的虚拟 DOM 和 DOM 表现也将有相应的变化。

首先是初始化过程，这里会着重讲，须要充分理解。

组件类在声明时，会先调用 getDefaultProps() 方法来获取默认 props 值，这个方法会且只会在声明组件类时调用一次，这一点须要注意，它返回的默认 props 由全部实例共享。

在组件被实例化以前，会先调用一次实例方法 getInitialState() 方法，用于获取这个组件的初始 state。

实例化以后就是渲染，componentWillMount 方法会在生成虚拟 DOM 以前被调用，你能够在这里对组件的渲染作一些准备工做，好比计算目标容器尺寸而后修改组件自身的尺寸以适应目标容器等等。

接下来就是渲染工做，在这里你会建立一个虚拟DOM用来表示组件的结构。对于一个组件来讲，render 是惟一一个必须的方法。render方法须要知足这几点：

1. 只能经过 this.props 或 this.state 访问数据

2. 只能出现一个顶级组件

3. 能够返回 null、false 或任何 React 组件

4. 不能对 props、state 或 DOM 进行修改

须要注意的是，render 方法返回的是虚拟 DOM。

渲染完成之后，咱们可能须要对 DOM 作一些操做，好比截屏、上报日志、或者初始化 iScroll 等第三方非 React 插件，能够在 componentDidMount() 方法中作这些事情。固然，你也能够在这个方法里经过 this.getDOMNode() 方法取得最终生成 DOM 节点，而后对 DOM 节点作爱作的事情，但须要注意作好安全措施，不要缓存已经生成的 DOM 节点，由于这些 DOM 节点随时可能被替换掉，因此应该在每次用的时候去读取。

组件被初始化完成后，它的状态会随着用户的操做、时间的推移、数据更新而产生变化，变化的过程是组件声明周期的另外一部分 ——

当组件已经被实例化后，使用者调用 setProps() 方法修改组件的数据时，组件的 componentWillReceiveProps() 方法会被调用，在这里，你能够对外部传入的数据进行一些预处理，好比从 props 中读取数据写入 state。

默认状况下，组件在 setState() 以后，React 会遍历这个组件的全部子组件，进行“灌水”，将 props 从上到下一层一层传下去，并逐个执行更新操做，虽然 React 内部已经进行过不少的优化，这个过程并不会花费多少时间，可是程序员里永远不缺少长期性能饥渴的同窗，不用担忧，React 有一个可以解决你性能饥渴的办法—— shouldComponentUpdate() ——有时候，props 发生了变化，但组件和子组件并不会由于这个 props 的变化而发生变化，打个比方，你有一个表单组件，你想要修改表单的 name，同时你可以确信这个 name 不会对组件的渲染产生任何影响，那么你能够直接在这个方法里 return false 来终止后续行为。这样就可以避免无效的虚拟 DOM 对比了，对性能会有明显提高。

若是这个时候有同窗仍然饥渴难耐，那么你能够尝试不可变数据结构(用过 mongodb 的同窗应该懂)。

组件在更新前，React 会执行 componentWillUpdate() 方法，这个方法相似于前面看到的 componentWillMount() 方法，惟一不一样的地方只是这个方法在执行的时候组件是已经渲染过的。须要注意的是，不能够在这个方法中修改 props 或 state，若是要修改，应当在 componentWillReceiveProps() 中修改。

而后是渲染，React 会拿此次返回的虚拟 DOM 和缓存中的虚拟 DOM 进行对比，找出【最小修改点】，而后替换。

更新完成后，React 会调用组件的 componentDidUpdate 方法，这个方法相似于前面 componentDidMount 方法，你仍然能够在这里能够经过 this.getDOMNode() 方法取得最终的 DOM 节点。

香港电影结尾常常看到一个剧情，就是英雄战胜了坏人，而后警察出来擦屁股——

componentWillUnmount 除了擦屁股什么也作不了。

你能够在这个方法中销毁非 React 组件注册的事件、插入的节点，或者一些定时器之类。这个过程可能容易出错，好比绑定了事件却没销毁，这个 React 可帮不了你，你本身约的炮，含着泪也要打完。

2、服务端渲染

下面咱们来看看 React 怎样结合 nodejs 实现服务端渲染。服务端渲染有多快我就很少说了。

由于有虚拟 DOM 的存在，React 能够很容易的将虚拟 DOM 转换为字符串，这便使咱们能够只写一份 UI 代码，同时运行在 node 里和和浏览器里。

var html = React.renderToString(elem);

在 node 里将 react 组件 HTML 渲染为 HTML，一句代码便可。

不过围绕这个 renderToString 咱们还要作一些准备工做：

1. 从后台 server 或数据库等来源拉取数据

2. 调用 React.renderToString() 方法来生成 HTML

3. 最后发送 HTML 和数据给浏览器

代码就不贴了，你们自行脑补。

须要注意的是这里的 JSON 字符串中可能出现 </script> 结尾标签或 HTML 注释，可能会致使语法错误，这里须要进行转义。

页面的示例代码原本打算用你们更熟悉的 HTML，但发现代码量太多了，因此换成了 jade 代码，没用过 jade 的同窗也顺便了解一下，我也顺便给 jade 打个广告。 这个页面作了这几件事：

1. 将前面在 action 里生成的 HTML 写到 #container 元素里

2. 引入必须的 JS 文件

3. 获取 action 提供的数据

4. 渲染组件

这就是 React 的服务端渲染，组件的代码先后端均可以复用。

是否是感受 React 挺牛逼的？还没完！

 

React 可以用一套代码同时运行在浏览器和 node 里，并且可以以原生 App 的姿式运行在 iOS 和 Android 系统中，即拥有了 web 迭代迅速的特性，又拥有原生 App 的体验。

这个姿式叫作 React-Native。

这是 React 和 React-Native 在 github 上的数据，能够看出 React-Native 也是至关热门——由于 React-Native 可以使 React 的价值最大化，这个价值是什么呢——对业务来讲，意味着不须要为了作终端版本就招聘和前端等量人力的终端开发，同时意味着咱们成为全栈工程师有了一个捷径。

三.React-Native

了解 iOS 开发的同窗都知道，水果公司对应用上架的审核效率实在让人无力吐槽，不少团队上一个版本还没审核结束，下一个版本就已经作好了。而 React-Native 支持从网络拉取 JS，这样 iOS 应用也可以像 web 同样实现快速迭代了。

上图就是 react-native 的调试过程，以 iOS 为例

1. 启动 xcode build

2. 在模拟器中按下 Command + D 打开菜单，选择 Debug in Chrome

3. 在 Chrome dev tools 中调试

4、缺点

固然，react 并非完美的，在实际使用时你也会发现她的一些缺点，好比：

（若是只是作安卓 app 开发，那么“苹果两件套+开发者证书”不是必须的，在 windows 下面开发便可。）最后，你们在使用 react 开发时，可能会须要安装 React developer tools

最后是一点参考资料

原文：http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=401107957&idx=1&sn=200418877771f656c1a0ab33ad407516&scene=0#wechat_redirect