玩转 React（二）- 新型前端开发方式

这是《玩转 React》系列的第二篇。在该篇中，咱们来了解下，React 的出现到底给咱们的开发方式带来了什么样的变化。

个人感触能够用一个字来形容，爽！主要爽在如下两个方面。

视图是数据的映射（单向数据流）

React 是一个视图层的框架，所谓视图层就是咱们在网页上能看到的部分。在传统的方式中，咱们经过编写HTML代码来设计网页的结构，经过 JavaScript 以及 getElementById 等 api 来获取某个节点，经过节点的 innerHTML，innerText，appendChild 等属性或者方法（或者你也可能用JQuery）来更新视图。

在 React 时代，你除了须要本身考虑网页的结构和CSS样式外，视图的更新 React 通通帮你搞定。

那么，用了 React 咱们如何来更新视图呢，先看下面这个张图：

在 React 中视图是数据的映射，你想要视图发生变化，那你只要改变数据就行了，就是这么简单。

举个简单的例子，你打算在你的页面上展现用户的名片，名片上有照片、姓名、年龄、地址等基本信息，以下图所示：

这个名片，做为视图的一部分，在 React 中是由某个用户的数据映射而来的，可能长得像这样：

{
    photo: "my-photo.jpeg",
    name: "sarike",
    age: 18,
    address: "北京"
}

若是你但愿网页的浏览者，能够切换查看不一样用户的名片，你要作的只是用下一个用户的数据替换一下当前的数据就能够了。至于新的数据是如何替换掉页面上的旧数据的，就无需关心了，React 会以最高效的方式帮你完成。

这也就是所谓的单向数据流，在这种开发方式下，会让你更新视图的逻辑很是清晰、简单，哪怕你的前端交互很复杂，也不至于让你的代码那么容易变成一坨。

是否是很爽？

面向组件编程

上一部分说的 React 中更新视图只须要更新数据就能够了，若是你以为也就通常般吧，那下面要说的必定爽到爆。

先说一下什么是组件，顾名思义，组件就是用来组合成更高级东西的物件。打个比方，好比一辆汽车，汽车中的各类螺丝、铁块等零件就能够看做是一个个组件，这些小的组件咱们还能够继续组合，好比组合成发动机、轮胎、车架等有特定功能的组件，而后这些组件又能够继续组合成一辆完整的汽车。

对应到咱们的前端开发中，HTML中的各类元素（如：div，table，input，select等）就是一个个最基本的组件，你能够把他们继续组合，组合成第一部分说的名片，或者一个填写用户信息的表单，展现所用用户的一个列表等有特定业务功能的组件，各类各样的业务组件最终组合成一个完整的前端页面。

组件最大的特色就是能够重复利用，好比说用户名片这个组件，你能够放到我的信息页面，也能够放到文章详情页面来展现做者信息，制做完成，处处利用。

言归正传，那在使用 React 是，是如何面向组件编程的呢，如今你能够这样来理解，React 提供了一种能够创造新的 HTML 标签的能力。

例如第一部分讲的用户名片的例子，经过 React 你能够制做这样一个组件：

<Card name="sarike" age="18" address="北京" />

并且更重要的是，你能够以如此简单的方式在你应用的任何位置重复利用。

你说，酷不酷，爽不爽？！！

至此之后，你在开发一个前端页面时，你须要作的就是将页面拆分红各类组件，而后把它们组合起来就行了。

在此想跟你们分享一点小经验，这也关系到你最终能不能将 React 用得很溜。就是：在前端开发过程当中，要善于观察和抽象。尤为是在项目前期，不要着急写代码，必定观察项目的原型图或者设计稿，想一想哪些部分是能够拆分红能够复用的公共组件的。这样作能让你后面的工做，事半功倍。

在后面的文章中你将更深刻地体会到这一点，同时你也会体会到 React 的组件化开发，究竟是多么多么的爽！！

写在最后

在阅读上面内容的时候，你可能会有一些疑惑，好比说你可能会质疑“建立一个新的 HTML 标签这种说法”，这怎么可能呢？是的，深究原理的话，确实不是这样，可是从开发者使用框架的角度，React 确实给了咱们这样的体验。因此，但愿你们在阅读的时候跟着个人节奏来就好，全部的疑惑会随着文章的推动，渐渐消退。

谢谢你们。