实现React单页应用的方法详解


Posted in Javascript onAugust 02, 2016

首先在学习这门框架前,你需要对以下知识有所了解:

     1.原生JS基础

     2.CSS基础

     3.npm包管理基础

     4.webpack构建项目基础

     5.ES6规范

以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。

JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和Browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容,但可以使用babel等转换器进行转换。

结合其他的一些主流前端框架,我个人认为构建单页应用有这样三个基本的东西:组件、路由、状态管理。那么接下来我就基于这三者来介绍React,当然其中会穿插一些额外的知识点。

组件

React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法,以下是一个例子:

// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css'


// 主组件
class MyDemo extends React.Component {
  render() {
    return (
      <div className="box">
        <MyComponent />
      </div>
    )
  }
}

render((
  <MyDemo />
), document.getElementById('app'))


// component.js

// 子组件
import React from 'react'

export default class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <p>这是一个组件!</p>
      </div>
    )
  }
}


// main.css
.box {
  width: 100%
}

相比Vue.js框架,我个人认为React的组件编写方式还是没有Vue来的舒服,组件的css样式还是脱离在组件外部的,维护起来也不是很方便。

从这个例子中我们就可以看到React的虚拟DOM和JSX的特性了。相比其他框架,React的虚拟DOM不仅可以提升页面的性能,同时还可以防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍

至于JSX语法则是JS的一种语法糖,我们可以通过这种语法糖来便捷实现一些功能,这里JSX 把类 XML 的语法转成纯粹 JavaScript,XML 元素、属性和子节点被转换成 React.createElement 的参数。类似的JS语法糖还有TypeScript等。

路由

前端路由机制是目前构建单页应用(SPA)最重要的一环之一。通过前端路由我们可以优化用户体验,不需要每次都从服务器获取全部数据,从而快速将页面展现给用户。

React路由依赖于React RouterReact Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。

下面是一个React路由的例子:

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'

const ACTIVE = { color: 'red' }

class App extends Component {
  render() {
    return (
      <div>
        <h1>我的路由</h1>
        <ul>
          <li><Link to="/" activeStyle={ACTIVE}>首页</Link></li>
          <li><Link to="/users" activeStyle={ACTIVE}>用户页</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}

class Index extends React.Component {
  render() {
    return (
      <div>
        <h2>Index!</h2>
      </div>
    )
  }
}

class Users extends React.Component {
  render() {
    return (
      <div>
        <h2>Users</h2>
      </div>
    )
  }
}

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="users" component={Users}></Route>
    </Route>
  </Router>
), document.getElementById('app'))

这里只列出了React的一种路由写法。相比其他框架,React路由的语法更加通俗易懂。 

状态管理

状态管理不是单页应用必须的,使用它能够帮助我们统一管理各个状态的变更,使整个项目流程清晰可维护。React实现状态管理可以使用官方推荐的Redux。

Redux使用的是严格的单向数据流。整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。 

项目实例

这里我用React写了一个单页网站,页面如下:

实现React单页应用的方法详解

Fetch

因为上面的实例中我用到了Fetch来进行Ajax交互,所以这里简单介绍下Fetch。
我们可以把Fetch作为下一代Ajax技术,它采用了目前流行的 Promise 方式处理。

利用Fetch我们可以这样写Ajax进行数据交互:

// 获取数据方法
  fetchFn = () => {
    fetch('../../data.json')
      .then((res) => { console.log(res.status);return res.json() })
      .then((data) => { this.setState({lists:data.listData}) })
      .catch((e) => { console.log(e.message) })
  }

总结

学习一门框架最重要的并不是学习它的技术,而是学习其带来的解决问题的思路。通过React这一门框架的学习,你可以从它独特的新特性中发掘一种新的思维模式。只有思维层面得到了扩展,你才能在前端的海洋里自由翱翔。希望本文对大家学习React有所帮助。

Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
JS变量及其作用域
Mar 29 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
springboot+VUE实现登录注册
May 27 Vue.js
cypress测试本地web应用
Jun 01 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 #Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 #Javascript
AngularJS ng-mousedown 指令
Aug 02 #Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 #Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 #Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 #Javascript
jQuery树形控件zTree使用小结
Aug 02 #Javascript
You might like
php date()日期时间函数详解
2010/05/16 PHP
url decode problem 解决方法
2011/12/26 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
JavaScript中的undefined学习总结
2013/11/30 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
python处理xml文件的方法小结
2017/05/02 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python内存动态分配过程详解
2019/07/15 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python操作toml文件的示例代码
2020/11/27 Python
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
个人自我鉴定总结
2014/03/25 职场文书
房屋租赁意向书
2014/04/01 职场文书
股份合作协议书
2014/04/12 职场文书
学校安全管理责任书
2014/07/23 职场文书
初中中等生评语
2014/12/29 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
mysql的数据压缩性能对比详情
2021/11/07 MySQL