初识React

React简介

React首次被提出是在2014年的f8大会(f8是由facebook组织的一个年度的技术峰会,目标听众是从事web周边产品和服务的开发者和企业)上,当期的主题叫做 Rethinking Web App Development at Facebook,所以可以这样定义React:颠覆式前端UI开发框架。

我们都知道基于html的前端界面开发正变得越来越复杂,传统的开发方式在解决将来自于服务器或者用户输入的交互数据,动态反应到复杂界面上的时候,代码量变得越来越大,越来越难以维护,常常力不从心。基于此,先是谷歌推出了自己的前端框架AngularJS,将对DOM的直接操作释放通过directive来实现复杂的DOM修改。但Angular存在一些问题,比如说其整体作为一个MVVM框架显得过重,不适用于那些对性能要求比较高的站点,例如移动端的web站,其UI组件的封装相对复杂不利于重用。而React则另辟蹊径地解决了这些问题。

首先要知道React并不是一个完整的MVC,MVVM框架,其只负责View层,React的设计团队并不认为MVC的设计模式仍适用于某些场景下的开发,所以才有了围绕React的一系列理念。设计理念的不同就决定了React要比Angular轻得多。React实现的原理是Virtual DOM机制,Virtual DOM以及数据单项绑定就使得React的渲染、响应非常快,其非常传神的表达了FaceBook这家公司的文化:独立、小巧、快速、创新。Virtual DOM带来的不仅仅是性能上的提升,更重要的是其背后所蕴含的思想—组件化开发。所以组件就是封装起来具有独立功能的UI控件,React推崇的就是用组件的方式去重新思考UI的构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式最终构成一个大的组件,完成整体UI的构建,这就意味着其是高度可重用的。

React的应用场景:

  1. 业务需求在复杂的场景下,还有着高性能要求。
  2. 重用组件库,组件组合。
  3. 少做无用功。

React需要正确认识的点:

  1. React不是一个完整的MVC、MVVM框架,其只负责View层。
  2. React 跟Web Components不冲突。
  3. React的特点就是"轻"。

React的理念

在继续深入学习React的其他知识之前,我们先实现一个简单的ClickCounter组件,通过这个简单的组件思考一下React的工作方式,要了解一样东西的特点,最好的方法当然是拿这个东西和另一样东西做比较。我们就拿React和jQuery来比较。

jQuery的工作方式:

我们先用jQuery来实现ClickCounter的功能:

// index.html文件
<!doctype html>
<html>
  <body>
    <div>
      <button id="clickMe">Click Me</button>
      <div>
        Click Count: <span id="clickCount">0</span>
      </div>
    </div>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="./clickCounter.js"></script>
  </body>
</html>

// clickCounter.js文件
$(function() {
  $('#clickMe').click(function() {
    var clickCounter = $('#clickCount');
    var count = parseInt(clickCounter.text(), 10);
    clickCounter.text(count+1);
  })
})

在jQuery的解决方案中,首先根据CSS规则找到id为clickCount的按钮,挂上一个,挂上一个匿名事件处理函数,在事件处理函数中,选中那个需要被修改的DOM元素,读取其中的文本值,加以修改,然后修改这个DOM元素。

选中一些DOM元素,然后对这些元素做一些操作,这是一种最容易理解的开发模式。因为这种模式直观易懂。但是,对于庞大的项目,这种模式会造成代码结构复杂,难以维护。

React的工作方式:

// clickCounter.js文件
import React, { Component } from 'react';

class ClickCounter extends Component {

  constructor(props) {
    super(props);
    this.onClickButton = this.onClickButton.bind(this);
    this.state = {
      count: 0
    }
  }

  onClickButton() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    const counterStyle = {
      margin: '16px'
    }
    return (
      <div style={counterStyle}>
        <button onClick={this.onClickButton}>Click Me</button>
        <div>
          Click Count: <span id="clickCount">{this.state.count}</span>
        </div>
      </div>
    );
  }
}

export default ClickCounter;

// index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import ClickCounter from './ClickCounter';

ReactDOM.render(
  <ClickCounter/>,
  document.getElementById('root')
);

React的理念:

与jQuery不同,用React开发应用是另一种体验,用React开发的ClickCounter组件并没有像jQuery那样做“选择一些DOM元素然后做一些事情”的动作。

打一个比方,React是一个聪明的建筑工人,而jQuery是一个比较傻的建筑工人,开发者你就是一个建筑的设计师,如果jQuery这个建筑工人为你工作,你不得不事无巨细地告诉jQuery“如何去做”,要告诉他这面墙要拆掉重建,那面墙上要新开一个窗户,反之,如果是React这个建筑工人为你工作,你要做的就是告诉这个工人“我想要什么样子”,只要把图纸递给React这个工人,他就会替你搞定一切,当然他不会把整个建筑拆掉重建,而是很聪明地把这次的图纸和上次的图纸做一个对比,发现不同之处,然后只去做适当的修改就完成任务了。

显而易见,React的工作方式把开发者从繁琐的操作中解放出来,开发者只需要着重“我想要显示什么”,而不用操心“怎么去做”。

这种新的思维方式,对于一个简单的例子也要编写不少代码,感觉是用高射炮打蚊子,但是对于一个大型的项目,这种方式编写的代码会更容易管理,因为整个React要做的就是渲染,开发者关注的是渲染成什么样子,而不用关心如何实现增量渲染。

React的理念,归结为一个公式,就像下面这样:

           UI= render(data)

这个公式表达的含义,用户看到的界面(UI),应该是一个函数(在这里叫render)的执行结果,只接受数据(data)作为参数。这个函数是一个纯函数,所谓纯函数,指的是没有任何的副作用,输出完全依赖于输入的函数,两次函数调用如果输入相同,得到的结果也绝对相同。如此一来,最终的用户界面,在render函数确定的情况下完全取决于输入数据。

对于开发者来说,重要的是区分开那些属于data,哪些属于render,想要更新用户界面,要做的就是更新data,用户界面自然会做出响应,所以React实践的也是“响应式编程”(Reactive Programming)的思想,这也就是React为什么叫做React的原因。

React工作方式的优点:

毫无疑问,jQuery的方式直观易懂,对于初学者十分适用,但是当项目逐渐变得庞大时,用jQuery写出的代码往往相互纠缠(事件与DOM元素),难以维护。

使用React的方式,就可以避免构建复杂的程序结构,无论何种事件,引发的都是React组件的重新渲染,至于如何只修改必要的DOM部分,则完全交给React去操作,开发者并不需要关心。

React利用函数式编程的思想来解决用户界面渲染的问题,最大的优势是开发者的效率会大大提高,开发出来的代码可维护性和可阅读性也大大增强。

React等于强制所有组件都按照数据驱动渲染的模式来工作,无论应用的规模多大,都能让程序处于可控范围内。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Material Design组件

Material Design — 提示框( Dialogs)

3479
来自专栏IMWeb前端团队

react css组织的另一种选择styled-components

本文作者:IMWeb linq 原文出处:IMWeb社区 未经同意,禁止转载 写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB...

20910
来自专栏WeTest质量开放平台团队的专栏

如何编写高效手游自动化测试脚本?

WeTest基于引擎的自动化测试,能够深入到游戏战斗内部进行适配和性能测试。在实际执行过程中,如何更简单、更高效地编写自动化脚本?本文重点阐述下面3个问题的解决...

753
来自专栏互联网杂技

抛弃jQuery,拥抱原生JavaScript

Why not jQuery 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/...

3288
来自专栏小古哥的博客园

微信小程序-实战巩固(二)

刚刚写了小程序入门没几天,小程序就开放个人开发者资格,感觉为我而来啊 \(≧▽≦)/。迫不及待的去注册,准备将之前的处女作传上去体验一把,结果卡在了服务器配置上...

4097
来自专栏何俊林

SuperIndicator开源库源码分析

背景:为什么有这个库,在经常开发中,会碰到,显示广告位图片,精彩推荐,及比较好的,希望能直观显示到用户看的。那么SuperIndicator正是这样一个类库。 ...

1775
来自专栏程序你好

JavaScript调试和优化,深入研究谷歌Chrome浏览器开发工具(二)

您可以使用console.time(label)和console.timeEnd(label)来度量代码执行所需的时间。让我们在我们的简单示例中计算update...

1074
来自专栏携程技术中心

干货 | Mvvm 前端数据流框架精讲

792
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(二)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

2878
来自专栏数说工作室

【SAS Says】基础篇:1. SAS软件入门

本系列【基础篇】已经完全完结了,方便大家阅读学习,我们合并在成一个专辑,目录如下: 1. SAS软件入门 2. 读取数据 3. 描述数据 4. ODS的使用 5...

4448

扫码关注云+社区