摘要：这也就是所谓的单向数据流，在这种开发方式下，会让你更新视图的逻辑非常清晰简单，哪怕你的前端交互很复杂，也不至于让你的代码那么容易变成一坨。就是在前端开发过程中，要善于观察和抽象。
这是《玩转 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 你可以制作这样一个组件：
而且更重要的是，你可以以如此简单的方式在你应用的任何位置重复利用。
你说，酷不酷，爽不爽？！！
至此以后，你在开发一个前端页面时，你需要做的就是将页面拆分成各种组件，然后把它们组合起来就好了。
在此想跟大家分享一点小经验，这也关系到你最终能不能将 React 用得很溜。就是：在前端开发过程中，要善于观察和抽象。尤其是在项目前期，不要着急写代码，一定观察项目的原型图或者设计稿，想想哪些部分是可以拆分成可以复用的公共组件的。这样做能让你后面的工作，事半功倍。
在后面的文章中你将更深入地体会到这一点，同时你也会体会到 React 的组件化开发，到底是多么多么的爽！！
写在最后在阅读上面内容的时候，你可能会有一些疑惑，比如说你可能会质疑“创建一个新的 HTML 标签这种说法”，这怎么可能呢？是的，深究原理的话，确实不是这样，但是从开发者使用框架的角度，React 确实给了我们这样的体验。所以，希望大家在阅读的时候跟着我的节奏来就好，所有的疑惑会随着文章的推进，渐渐消退。
谢谢大家。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88668.html
摘要：本人计划编写一个针对中初级前端开发者学习的系列教程玩转。使用的原因是新的语言规范开发效率更高代码更优雅，尤其是基于开发的项目。其次也是目前特别流行的一个前端框架，截止目前，上有将近万，国内一二线互联网公司都有深度依赖开发的项目。 本人计划编写一个针对中初级前端开发者学习 React 的系列教程 - 《玩转 React》。 文章更新频率：每周 1 ~ 2 篇。 目录 玩转 React（...
摘要：属性是一个组件的外部输入。只会在开发模式下进行属性类型检查，当代码进行生产发布后，为了减少额外的性能开销，类型检查将会被略过。某个类的实例枚举，属性值必须为其中的某一个值。属性为一个数组，且数组中的元素必须符合指定类型。 在第二篇文章 《新型前端开发方式》 中有说到 React 有很爽的一点就是给我们一种创造 HTML 标签的能力，那么今天这篇文章就详细讲解下 React 是如何提供这...
摘要：属性是一个组件的外部输入。只会在开发模式下进行属性类型检查，当代码进行生产发布后，为了减少额外的性能开销，类型检查将会被略过。某个类的实例枚举，属性值必须为其中的某一个值。属性为一个数组，且数组中的元素必须符合指定类型。 在第二篇文章 《新型前端开发方式》 中有说到 React 有很爽的一点就是给我们一种创造 HTML 标签的能力，那么今天这篇文章就详细讲解下 React 是如何提供这...
摘要：绑定事件处理函数指向的四中方式以及他们的优缺点。内部自己实现了一套高效的事件机制，为了提高框架的性能，通过事件冒泡，只在节点上注册原生的事件，内部自己管理所有组件的事件处理函数，以及事件的冒泡捕获。 前面的文章介绍了 React 的 JSX 语法、组件的创建方式、组件的属性、组件的内部状态以及组件的生命周期。另外，还顺带说了各个知识点要重点注意的事情，以及我在项目实践中的一些经验。如果...
阅读 2899·2023-04-25 18:03
阅读 941·2021-11-15 11:38
阅读 5124·2021-10-25 09:45
阅读 645·2021-09-24 09:48
阅读 1885·2021-09-22 15:34
阅读 1631·2019-08-30 15:44
阅读 2558·2019-08-30 13:12
阅读 445·2019-08-29 16:05
