浅尝初试 React 技术栈

freeCodeCamp 中国推广者,致力于为技术社区提供良心干货、暖心教程。

文章正文

React

React 是什么?

Facebook 官方对 React 定义是:用来构建用户界面的库(Library)。注意到这里的用词是库(Library)而不是框架(Framework)。React 不像早期版本的 Angular 这样功能非常完备的 mvvm 框架,它主要只专注于解决 MVC 当中 V 层,也就是视图层(View)方面的问题。

不过我们也不必太过纠结库(Library)或框架(Framework)的定义。复杂的,给出你一整套解决方案的就叫框架(Framework);简单的,专注解决一个问题并做到极致(Do one thing and do it well)的就叫库(Library)。

不过我们还是习惯性地称 React 是一个 JavaScript 框架,因为除了 React 核心库本身,在 React 的生态圈当中,还有很多其他可以搭配协同的工具库,比如在这次分享当中我们要介绍的用来解决状态管理问题的 Redux ;用来提供前端路由功能的 react-router 。我们把这些工具库统称为 React 技术栈,组合使用 React 技术栈也就完全撑得起一个框架提供的功能了。

React 有哪些特性?

声明式

说白了声明式就是你告诉程序你要一个什么样的东西的编写代码的方式。这也是在开发构建用户界面时最友好的方式。在 React 当中,你可以很轻松地告诉 React 你想要一个什么样的界面。我们使用一种叫做 JSX 的类似于 HTML/XML 的 JavaScript 语法扩展来和 React 交流:

<应用>
    <输入框></输入框>
    <按钮></按钮>
</应用>

这就好像我们可以直接对 React 说:

这里我要一个按钮! 这里我要一个表单!

是不是非常的直观明了呢?

组件化

在 React 当中,我们是以组件(Component)的概念来划分用户界面的。通常我们开发的页面都可以拆成一个个通用的组件,例如导航、表单、列表项、页脚等等。

使用 React 可以在很大程度上提高你代码的可复用性,编写页面就如搭积木一般简单:

<应用>
    <导航/>
    <注册表单/>
    <页脚/>
</应用>

这也同样意味着,我们除了可以在开发页面时复用自己编写的组件以外,还能把别人编写好的通用组件直接拿过来用。自定义一下样式,传个数据进去,组合起来,一个页面分分钟就搞定。

一次学习,随处编写

React 最强大的地方在于,其内部实现的虚拟DOM屏蔽了所有的底层实现,通过不同的渲染器(renderer),你编写的同一套代码可以用来构建包含 浏览器/桌面操作系统/Android/iOS 等几乎所有平台的用户界面。也就是说,掌握了 React 之后,你的能力将不止局限于写网页,而是可以在几乎所有的平台上开发用户界面。

这也就是为什么我们使用 React 的时候需要调用两个库 react 和 react-dom,react 库文件用来实现 React 的核心功能,react-dom 则用来把它渲染到浏览器当中。

目前已有的其他平台的解决方案还包括:

  • React Native

  • React VR

  • React XP

例如在使用 React Native 的时候,我们同样是使用 react 核心库来实现基础功能,然后通过 react-native 库将我们编写的界面渲染到移动端上。

也就是说,有了 React 之后,我们可以用一种统一的描述方式来开发用户界面,至于在什么平台上实现,只要有相应的渲染器(renderer),我们就能够把我们开发的界面在对应的平台上面渲染出来。例如在美剧《西部世界》当中,React 甚至可以用来编写人工智能 Host 的故事线:

西部世界代码图.jpg

用 React 编写组件

React 组件

我们用 React 编写的代码绝大多数都是组件的代码。编写 React 组件需要遵循 React 内部的一系列规范,因此用 React 编写出来的应用自带前端工程化属性。不管新手还是老司机,只要是用 React 写组件,我们都能保证他写出来的代码是差不多的。这也就非常有利于一个项目组当中多个开发者之间进行协作。非常适合高级做架构,中级封组件,初级写业务的模式。

React 组件其实就相当于 JavaScript 当中的一种函数,接受应用数据作为参数,内部进行一系列处理(包含事件处理函数、生命周期函数等,此处不展开讲),返回一个 React 元素。

React 元素

这里要注意到,React 组件和 React 元素是两个不同的概念。React 元素是 React 组件的一部分,也就是 React 组件返回的要拿来渲染的内容。

JSX

在 React 当中,我们通过一种叫做 JSX 的 JavaScript 语法扩展来描述 React 元素。

const title = <h1>Counter</h1>;

这里特别要注意的是,JSX 既不是原生的 HTML,也不是 jQuery 当中的字符串 $('<h1>Counter</h1>') ,更不是 pug(jade) 当中的模板 h1 Counter。这是 React 内部自己的一套实现,可以允许你像写 HTML 一样,在 JavaScript 代码当中直接写页面,React 会在随后的渲染过程当中自动把 JSX 转译成页面当中真实的 DOM 元素。

函数定义组件 & 类定义组件

在 React 当中,有两种定义组件的方式。(注:在 react@15.6 当中已经废弃了 createClass 方法,如果你从来没用过 React 请自动忽略)

函数定义组件

比较简单的一

作者正在撰写中...
隐藏内容 支付可见
内容互动
写评论
加载更多
评论文章
¥5 购买
× 订阅 Java 精选频道
¥ 元/月
订阅即可免费阅读所有精选内容