实现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 相关文章推荐
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 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实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
日期 时间js控件
2009/05/07 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
在校大学生个人的自我评价
2014/02/13 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
经典团队口号
2014/06/06 职场文书
力学专业求职信
2014/07/23 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript