实现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 相关文章推荐
jQuery1.6 使用方法一
Nov 23 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
JS前端笔试题分析
Dec 19 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
vue实现树状表格效果
Dec 29 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
新浪新闻小偷
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
React简单介绍
2017/05/24 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
python怎么提高计算速度
2020/06/11 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
教师自我鉴定范文
2013/11/10 职场文书
教师读书活动总结
2014/05/07 职场文书
售后客服工作职责
2014/06/16 职场文书
2014年党建工作总结
2014/11/11 职场文书
2015年消防工作总结
2015/04/24 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers