实现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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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 开源框架22个简单简介
2009/08/24 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
DEFER怎么用?
2006/07/01 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python-接口开发入门解析
2019/08/01 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python timeit模块的使用实践
2020/01/13 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
Django如何重置migration的几种情景
2021/02/24 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
开业庆典答谢词
2014/01/18 职场文书
我的求职择业计划书
2014/04/04 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
土地转让协议书
2014/09/27 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
留学推荐信中文范文
2015/03/26 职场文书
入党申请书怎么写?
2019/06/21 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书